PHP开发 发表评论功能教程之jQuery

创建完整index.html页面


首先来看读取评论列表功能,当页面加载的时候,使用getJSON方法读取服务端PHP生成的JSON数据,展示给用户。

$(function(){ 
    var comments = $("#comments"); 
    $.getJSON("server.php",function(json){ 
        $.each(json,function(index,array){ 
            var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>" 
+array["addtime"]+"</span></p>"; 
            comments.append(txt); 
        }); 
    }); 
}); 

可以看出,需要通过$.each循环,读取JSON数据,因为生成的JSON数据有多条评论。当然你也可以使用for循环,但我更倾向于使用jQuery的$.each循环。


再来看下发表评论功能的前端代码。

$("#add").click(function(){ 
    var user = $("#user").val(); 
    var txt = $("#txt").val(); 
    $.ajax({ 
         type: "POST", 
         url: "comment.php", 
         data: "user="+user+"&txt="+txt, 
         success: function(msg){ 
            if(msg==1){ 
                var str = "<p><strong>"+user+"</strong>:"+txt+"<span>刚刚</span></p>"; 
                comments.append(str); 
                $("#message").show().html("发表成功!").fadeOut(1000); 
                $("#txt").attr("value",""); 
            }else{ 
                $("#message").show().html(msg).fadeOut(1000); 
            } 
         }  
    }); 
}); 

我们将前面的HTML和CSS页面结合在一起

index.htm 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
    <style type="text/css">
        .demo{
            width:500px;
            margin:  0 auto;
        }
        h3{
            font-size:18px
 }
        #comments{
            margin:10px auto
 }
        #post{
            margin-top:10px
 }
        #comments p,#post p{
            line-height:30px
 }
        #comments p span{
            margin:4px; color:#999
 }
        #message{
            position:relative;
            display:none;
            width:100px;
            padding:4px;
            margin-top:-100px;
            margin-left:30px;
            background: #ff0000;
            color: #c286ff;
            z-index:1001
 }
    </style>
    <script src="//cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var comments = $("#comments");
            $.getJSON("server.php",function(json){
                $.each(json,function(index,array){
                    var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>"+array["addtime"]+"</span></p>";
                    comments.append(txt);
                });
            });
            $("#add").click(function(){
                var user = $("#user").val();
                var txt = $("#txt").val();
                $.ajax({
                    type: "POST",
                    url: "comment.php",
                    data: "user="+user+"&txt="+txt,
                    success: function(msg){
                        if(msg==1){
                            var str = "<p><strong>"+user+"</strong>:"+txt+"<span>刚刚</span></p>";
                            comments.append(str);
                            $("#message").show().html("发表成功!").fadeOut(1000);
                            $("#txt").attr("value","");
                        }else{
                            $("#message").show().html(msg).fadeOut(1000);
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="demo">
    <div id="comments">
        <h3>评论列表</h3>
    </div>
    <div id="post">
        <h3>发表评论</h3>
        <p>昵称:</p>
        <p><input type="text" class="input" id="user" /></p>
        <p>评论内容:</p>
        <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
        <p><input type="submit" value="发表" id="add" /></p>
        <div id="message"></div>
    </div>
</div>
</body>
</html>

我们看到读取评论是在‘server.php’页面处理

将评论保存到数据库是在‘comment.php’页面处理


下面我们来写我们的PHP页面吧



继续学习
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发表评论</title> <style type="text/css"> .demo{ width:500px; margin: 0 auto; } h3{ font-size:18px } #comments{ margin:10px auto } #post{ margin-top:10px } #comments p,#post p{ line-height:30px } #comments p span{ margin:4px; color:#999 } #message{ position:relative; display:none; width:100px; padding:4px; margin-top:-100px; margin-left:30px; background: #ff0000; color: #c286ff; z-index:1001 } </style> <script src="//cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var comments = $("#comments"); $.getJSON("server.php",function(json){ $.each(json,function(index,array){ var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>"+array["addtime"]+"</span></p>"; comments.append(txt); }); }); $("#add").click(function(){ var user = $("#user").val(); var txt = $("#txt").val(); $.ajax({ type: "POST", url: "comment.php", data: "user="+user+"&txt="+txt, success: function(msg){ if(msg==1){ var str = "<p><strong>"+user+"</strong>:"+txt+"<span>刚刚</span></p>"; comments.append(str); $("#message").show().html("发表成功!").fadeOut(1000); $("#txt").attr("value",""); }else{ $("#message").show().html(msg).fadeOut(1000); } } }); }); }); </script> </head> <body> <div class="demo"> <div id="comments"> <h3>评论列表</h3> </div> <div id="post"> <h3>发表评论</h3> <p>昵称:</p> <p><input type="text" class="input" id="user" /></p> <p>评论内容:</p> <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p> <p><input type="submit" value="发表" id="add" /></p> <div id="message"></div> </div> </div> </body> </html>
提交重置代码