ajax练习四留言板

Posted 。。小兵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax练习四留言板相关的知识,希望对你有一定的参考价值。

留言界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.b
{     
    width:100%;
    margin-top:5px;
    left:10%;
    right:10%;
    background: #CCC;
    max-height:100px;
}
.c
{   
    width:100%;
    top:0px;
    height:30px;
    background:#C60;
}
.d
{
    width:100%;
    top:30px;
    padding-top:3px;
    padding-bottom:3px;
}
.e
{
    width:100%;
    bottom:0px;
    height:30px;
    background:#C60;
    position:absolute;
}

</style>
<script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script>

<title>无标题文档</title>
</head>

<body>
<?php session_start();//用户登录状态
if (empty($_SESSION["name"]))
{
    echo "<a href=\'index.php\'>未登录</a>";
}
else
{
    echo "<a href=\'yonghu.php\'>".$_SESSION["name"]."</a>";
}

?> 
<div style=" top:50px; width:30%; left:35%; position:absolute;" align="center">留言板</div>
<div align="center" style="border:#F00 solid 2px; width:70%; height:500px; left:15%; position:absolute;  top:100px" >
<div align="left" style="font:\'雅黑\'; color:#F00; font-size:24px ; left:10%; right:10%; margin-top:10px; border-bottom-color:#3F0 ; border-bottom:3px solid; position:absolute;" >投诉意见:</div><div align="left" style="background:#FF9; font-size:10px; width:90%; height:400px; top:50px; left:5%; position:absolute;" id="a">
<?php
include ("../DBDA.class.php");
include ("../page.class.php");
$db=new DBDA();
$sqlall="select count(*) from liuyanban ";
$attrall=$db->Query($sqlall);
$total=$attrall[0][0];
$page=new Page($total,7); //需要参数 1.数据总条
$sql="select * from liuyanban ".$page->limit;//SQL语句拼接limit;
$attr=$db->Query($sql);
foreach ($attr as $v)
{
    echo "
      <div class=\'b\'><div class=\'c\'>用户:{$v[1]}&nbsp;&nbsp; 留言时间:{$v[3]}</div><div class=\'d\'>{$v[2]}</div></div>";    
}

?>
</div>
<?php
    //调用分页信息
    echo "<div class=\'e\'>".$page->fpage()."</div>";
?>
</div>
<div style="width:80%; top:620px; border:#30F solid 2px; position:absolute; min-height:150px; left:10%;"><font size="+2">你的宝贵建议:</font><textarea id="text" style="width:80%; left:15%; height:100px; margin:10px; position:absolute;"></textarea>
<div style="bottom:2px; left:15%; position:absolute;"><input type="button" id="y"  value="提交" style="margin-left:10px;"/><input type="button" id="n"  value="取消" style="margin-left:10px;"/>
</div>
</div>
</body>
<script type="text/jscript">
$(document).ready(function(e) {
    $("#y").click(function(e) {
       var nr=$("#text").val();
       $.ajax({
           url:"chuli1.php",
           data:{nr:nr},
           type:"POST", 
           dataType:"TEXT",
           success: function(data)
           {
            
              if (data.trim()=="sl")
              {
                  alert("请先登录");
              }
              else if (data.trim()=="n")
              {   
                  alert("提交失败");
              }
              else 
              {   
                //将返回的信息显示在留言区
                  var hang=data.split("|");
                  var str="<div class=\'b\'><div class=\'c\'>用户:"+hang[1]+"&nbsp;&nbsp; 留言时间:"+hang[2]+"</div><div class=\'d\'>"+hang[0]+"</div></div>"; 
                  $(\'#a\').append(str);
                      
              }
           }        
       });
    });
    //取消按钮清空文本域
    $("#n").click(function(e) {
        $("#text").empty();
    });
});
</script>
</html>

登录页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script>
</head>

<body>
<?php 
session_start();//用户登录状态
if (empty($_SESSION["name"]))
{
    echo "<a href=\'index.php\'>未登录</a>";
}
else
{
    echo "<a href=\'yonghu.php\'>".$_SESSION["name"]."</a>";
}

?> 
<div  align="center" style="width:50%; top:100px; border:#F00 solid 1px ; font:large \'雅黑\' bolder; color:#C30; position:absolute; left:25%; ">
<h1>**会员登录</h1>
<div style="margin-top:20px; font-size:12px" >用户名:<input type="text" id="name" style="height:15px;"/></div>
<div style="margin-top:20px; font-size:12px; margin-bottom:20px;" >密&nbsp;码:<input type="password"id="pwd"  style="height:15px;"/> </div>
<div style="font-size:12px; margin-bottom:20px;"><input type="button"  value="登录" id="btn"/></div>
</div>
<script type="text/javascript" >

$(document).ready(function(e) {
    $("#btn").click(function(e) {
        var name=$("#name").val();
        var pwd=$("#pwd").val();
        $.ajax({
            url:"chuli.php",
            dataType:"text",
            data:{name:name,pwd:pwd},
            type:"POST",
            success: function(data){
                 var a=data.trim();
                if (a=="n")
                {   
                    alert("密码或账号错误");
                    window.location.href="index.php";
                }
                else if (a=="y")
                {
                    window.location.href="liuyanban.php"; 
                }
            }            
        });
    });
});
</script>
</body>
</html>

登录处理页面

<?php
session_start();
include ("../DBDA.class.php");
$db=new DBDA();
$pwd=$_POST["pwd"];
$name=$_POST["name"];
if ($name!=""&&$pwd!="")
{
$sql="select password from login where username=\'{$name}\'";
$attr=$db->StrQuery($sql);

if($attr==$pwd )
{
    echo"y";
    $_SESSION["name"]=$name;
}
else
{
    echo"n";
}
}

留言板处理

<?php
session_start();//用户登录状态
if(empty($_SESSION["name"]))//没有登录
{
    echo "sl";
}
else
{   
    include ("../DBDA.class.php");
    $name=$_SESSION["name"];
    $nr=$_POST["nr"];
    $time=date(\'Y-m-d H:i:s\');
    $db=new DBDA();
    $sql="insert into liuyanban values (\'\',\'$name\',\'$nr\',\'$time\')";
    $result=$db->Query($sql,2);
    if($result)//添加成功
    {
        $str="";
        $str=$nr."|".$name."|".$time;
        echo $str;
    }
    else//添加失败
    {
        echo "n";
    }
}

以上是关于ajax练习四留言板的主要内容,如果未能解决你的问题,请参考以下文章

练习-----部门内部留言板(0526)

适合Java语言新手入门练习的框架个人网站项目,目前主要维护网络mysql和网络psql两个分支。前台包括博客、代码库、文件下载、留言、登录注册、站内搜索、分类目录等功能,后台包括上传文件、博客、代码

PHP初级练习实战之公司留言板(原生)

20180826 优化版留言板 PHP ajax html css js jq

11月8日PHP练习《留言板》

PHP留言小练习