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

我曾写了一篇关于发表类似微博程序的文章:,而本文不同之处在于使用JSON读取评论列表,请看我一一讲述。

HTML

  1. <div id="comments"> 
  2.      <h3>读取评论</h3> 
  3. </div> 
  4. <div id="post"> 
  5.      <h3>发表评论</h3> 
  6.      <p>昵称:</p> 
  7.      <p><input type="text" class="input" id="user" /></p> 
  8.      <p>评论内容:</p> 
  9.      <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p> 
  10.      <p><input type="submit" value="发表" id="add" /></p> 
  11.      <div id="message"></div> 
  12. </div> 

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

CSS

  1. h3{font-size:14px
  2. #comments{margin:10px auto
  3. #post{margin-top:10px
  4. #comments p,#post p{line-height:30px
  5. #comments p span{margin:4pxcolor:#999
  6. #message{position:relativedisplay:nonemargin-top:-100pxmargin-left:30px;  
  7. background:#369color:#fffz-index:1001

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

jQuery

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

  1. $(function(){ 
  2.     var comments = $("#comments"); 
  3.     $.getJSON("server.php",function(json){ 
  4.         $.each(json,function(index,array){ 
  5.             var txt = "<p><strong>"+array["user"]+"</strong>:"+array["comment"]+"<span>" 
  6. +array["addtime"]+"</span></p>"
  7.             comments.append(txt); 
  8.         }); 
  9.     }); 
  10. }); 

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

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

  1. $("#add").click(function(){ 
  2.     var user = $("#user").val(); 
  3.     var txt = $("#txt").val(); 
  4.     $.ajax({ 
  5.          type: "POST"
  6.          url: "comment.php"
  7.          data: "user="+user+"&txt="+txt, 
  8.          success: function(msg){ 
  9.             if(msg==1){ 
  10.                 var str = "<p><strong>"+user+"</strong>:"+txt+"<span>刚刚</span></p>"
  11.                 comments.append(str); 
  12.                 $("#message").show().html("发表成功!").fadeOut(1000); 
  13.                 $("#txt").attr("value",""); 
  14.             }else
  15.                 $("#message").show().html(msg).fadeOut(1000); 
  16.             } 
  17.          }  
  18.     }); 
  19. }); 

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

PHP

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

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

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

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

  1. include_once("connect.php"); 
  2.  
  3. $user = htmlspecialchars(trim($_POST['user'])); 
  4. $txt = htmlspecialchars(trim($_POST['txt'])); 
  5. if(empty($user)){ 
  6.    echo "昵称不能为空!"
  7.    exit
  8. if(empty($txt)){ 
  9.    echo "评论内容不能为空!"
  10.    exit
  11. $time = date("Y-m-d H:i:s"); 
  12. $query=mysql_query("insert into comments(user,comment,addtime)values('$user','$txt','$time')"); 
  13. if($query)  echo "1"

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

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

  1. CREATE TABLE `comments` ( 
  2.   `id` int(11) NOT NULL auto_increment, 
  3.   `uservarchar(30) NOT NULL
  4.   `comment` varchar(200) NOT NULL
  5.   `addtime` datetime NOT NULL
  6.   PRIMARY KEY  (`id`) 
  7. ) ENGINE=MyISAM; 

转载请注明:代码家园 » Ajax应用 使用jQuery结合PHP和MySQL读取和发表评论

也许你会喜欢和关注与本文内容高度相关的文章:

jquery Star rating评论星星打分动态特效

基于jquery+css制作的隐藏式评论代码

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)