@greenfavo 2015-10-02T20:22:13.000000Z 字数 2518 阅读 703

php学习笔记(四）ajax无刷新评论

php

一，前言

用ajax写了个无刷新的评论demo，用户发表评论后不用刷新页面就可以看到自己的评论在当前页显示出来。这次的评论显示并不是直接从后台获取的，而是把数据传到后台然后存入数据库，前端显示的内容是直接从客户端获取，而不是后台返回的数据，减少了服务端的访问量。

二，前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无刷新评论</title>
    <style type="text/css">
    #author,#email{
        width: 200px;
        height: 20px;
        margin-bottom: 20px;
    }
    #submit{
        background: white;
        border:1px solid #ccc;
        width: 80px;
        height: 30px;
        margin-top: 20px;
    }
    .commentlist{
      border: 1px solid #ccc;
      width: 300px;
      padding: 10px;
      margin: 20px 10px;
    }
    </style>
</head>
<body>
    <div id="comments">
        <!-- 加载评论内容 -->
    </div>
    <h1>发表评论</h1>
    <form>
        昵称:<input type="text" id="author" required="required"/><br/>
        邮箱:<input type="email" id="email" required="required"/><br/>
        内容:<textarea id="content" cols="30" rows="3" required="required"></textarea><br/>
        <input type="button" id="submit" value="发表评论"/>
    </form>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $.ajax({
            type: "get",
            url: "comments.php?act=load&id="+Math.random(),
            beforeSend:function(){
                $("#comments").text("评论加载中...");
            },
            error:function(){
                $("#comments").text("获取评论信息失败!");
            },
            success:function(data){
                $("#comments").html(data);
            }
        })
        $("#submit").click(function(data){
            var author=$("#author").val();
            var email=$("#email").val();
            var content=$("#content").val();
            if (author&&email&&content) {//如果评论内容不为空
               $.post("comments.php",{
                    author:author,
                    email:email,
                    content:content,
                    act:"add"//添加评论
                },function(data){
                if (data==1) {//如果发表成功
                   $("form").trigger('reset');//模拟重置表单
                   var d=new Date();
                   //格式化时间
                   var time=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
                   var newcom=
                   "<div class='commentlist'>"
                     +author+" 发表于 "+time+"<br/><br/>"
                     +content+
                   "</div>";
                    $("#comments").prepend(newcom);//在前面添加
                    $(".msg").remove();//当有评论时移除此提示
                };
            })
            }else{
                alert("请填写评论信息");
            }           
        })
    });
    </script>
</body>
</html>

三，PHP处理

<?php
  require 'conn.php';
  $act=$_REQUEST['act'];//获取act变量的值
  if ($act=="load") {//如果是请求载入评论
    $result=mysql_query("select * from comments order by id desc limit 3");
    if (mysql_num_rows($result)>0) {
        while ($row=mysql_fetch_assoc($result)) {
            echo "<div class='commentlist'>".$row['author']." 发表于 ".$row['date']."<br/><br/>".$row['content']."</div>";
        }
    }else{
        echo "<p class='msg'>目前还没有用户评论！</p>";
    }
  }
  if ($act=="add") {
    $author=$_POST['author'];
    $email=$_POST['email'];
    $content=$_POST['content'];
    $date=date("Y-m-d H:i:s");
    $sql="insert into comments (author,email,content,date) values ('$author','$email','$content','$date')";
    if (mysql_query($sql)) {
        echo 1;//如果插入成功，则输出1给客户端
    }
  }
?>

四，总结

ajax功能很强大，可以神不知鬼不觉地和服务器交互，但有些客户端和服务端都相同的实时数据，可以直接从客户端获取，就不用从后台返回那么多数据了。代码就不详细解释了，有注释都看得懂。以后把这些文件都push到github上方便大家看也方便我以后忘了好查阅。