使用jQuery结合PHP和MySQL读取和发表评论
2011-01-10 12:55
796 查看
在本文中,我将带你一起使用PHP,MySQL和jQuery创建一个快速高效的发表评论的功能。您可以将此功能用在博客留言、产品评论等领域。
查看演示 下载源码
我曾写了一篇关于发表类似微博程序的文章:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,而本文不同之处在于使用JSON读取评论列表,请看我一一讲述。
HTML
HTML结构主要由读取评论列表和发表评论的表单。
CSS
用CSS控制页面外观,注意其中#message用来控制发表评论成功后的提示信息的样式。
jQuery
首先来看读取评论列表功能,当页面加载的时候,使用getJSON方法读取服务端PHP生成的JSON数据,展示给用户。
可以看出,需要通过$.each循环,读取JSON数据,因为生成的JSON数据有多条评论。当然你也可以使用for循环,但我更倾向于使用jQuery的$.each循环。
再来看下发表评论功能的前端代码。
当输入昵称和评论内容后,点击提交,通过Ajax向后台comment.php程序发送请求,PHP对请求作出相应,并将数据插入数据库,成功后返回结果给前台。
PHP
先来看PHP读取和生成JSON数据的server.php代码。
注意你的PHP版本应该是5.2以上才能使用json_encode函数。
再来看下发表评论的comment.php代码。
comment.php接收前台ajax提交过来的昵称和评论内容参数,判断参数的合法性,然后将数据插入到数据库中,如果成功,则输出1,返回给前台jQuery处理。
本例使用简单容易的代码诠释了轻量、高效的jQuery结合PHP的ajax运作机制,当然这只是一个基础的例子,jQuery还能做很多事情,留给大家去尽情发挥吧。最后,奉上数据库表结构:
查看演示 下载源码
我曾写了一篇关于发表类似微博程序的文章:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,而本文不同之处在于使用JSON读取评论列表,请看我一一讲述。
HTML
<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结构主要由读取评论列表和发表评论的表单。
CSS
h3{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;
相关文章推荐
- 使用jQuery结合PHP和MySQL读取和发表评论
- PHP结合jQuery实现的评论顶、踩功能
- PHP结合jQuery实现的评论顶、踩功能
- 使用ajax,结合jquery,php实现图片上传预览功能
- AJAX实现页面无刷新发表评论(post请求,服务器端使用php)
- zyUpload多图上传插件的使用(基于php jquery)
- 使用jquery.uploadify、jquery.Jcrop和php实现炫酷的图片裁剪
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- 使用jQuery和PHP实现类似360功能开关效果
- JQuery 结合 Bootstrap 使用Tab
- CSDN使用技巧之 --- 使用CSDN剪影发表评论
- jQuery动画效果animate和scrollTop结合使用实例
- jQuery的$.fn与$.extend使用结合
- 【转】使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能
- CSDN使用技巧之 --- 使用CSDN剪影发表评论
- JQuery和PHP结合实现动态进度条上传显示
- Ajax应用:使用jQuery和PHP实现功能开关效果
- google map api 与jquery结合使用(1)--控件,监听器[转帖]