使用jQuery结合PHP和MySQL读取和发表评论

我曾写了一篇关于发表类似微博程序的文章：PHP+Mysql+jQuery实现发布微博程序--jQuery篇，而本文不同之处在于使用JSON读取评论列表，请看我一一讲述。

XHTML<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> 

HTML结构主要由读取评论列表和发表评论的表单。

CSSh3{font-size:14px} 
#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; margin-top:-100px; margin-left:30px;  
background:#369; color:#fff; z-index:1001} 

用CSS控制页面外观，注意其中#message用来控制发表评论成功后的提示信息的样式。

jQuery

首先来看读取评论列表功能，当页面加载的时候，使用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); 
            } 
         }  
    }); 
}); 

当输入昵称和评论内容后，点击提交，通过Ajax向后台comment.php程序发送请求，PHP对请求作出相应，并将数据插入数据库，成功后返回结果给前台。

PHP

先来看PHP读取和生成JSON数据的server.php代码。

//连接数据库 
include_once("connect.php"); 
 
$q=mysql_query("select * from comments"); 
while($row=mysql_fetch_array($q)){ 
        $comments[] = array("id"=>$row[id],"user"=>$row[user],"comment"=>$row[comment], 
"addtime"=>$row[addtime]); 
} 
echo json_encode($comments); 

注意你的PHP版本应该是5.2以上才能使用json_encode函数。

再来看下发表评论的comment.php代码。

include_once("connect.php"); 
 
$user = htmlspecialchars(trim($_POST['user'])); 
$txt = htmlspecialchars(trim($_POST['txt'])); 
if(empty($user)){ 
   echo "昵称不能为空！"; 
   exit; 
} 
if(empty($txt)){ 
   echo "评论内容不能为空！"; 
   exit; 
} 
$time = date("Y-m-d H:i:s"); 
$query=mysql_query("insert into comments(user,comment,addtime)values('$user','$txt','$time')"); 
if($query)  echo "1"; 

comment.php接收前台ajax提交过来的昵称和评论内容参数，判断参数的合法性，然后将数据插入到数据库中，如果成功，则输出1，返回给前台jQuery处理。

本例使用简单容易的代码诠释了轻量、高效的jQuery结合PHP的ajax运作机制，当然这只是一个基础的例子，jQuery还能做很多事情，留给大家去尽情发挥吧。最后，奉上数据库表结构：

CREATE TABLE `comments` ( 
  `id` int(11) NOT NULL auto_increment, 
  `user` varchar(30) NOT NULL, 
  `comment` varchar(200) NOT NULL, 
  `addtime` datetime NOT NULL, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM; 

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于 helloweba.com并保留原文链接，否则视为侵权。

demo:www.helloweba.com/demo/download/comments.rar