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页面吧



Weiter lernen
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
einreichenCode zurücksetzen
图片放大关闭