欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

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

来源:     2013年07月02日17:02
字号:T|T

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

查看演示DEMO 下载源码

XHTML

读取评论

发表评论

昵称:


评论内容:



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 = "

"+array["user"]+":"+array["comment"]+"" +array["addtime"]+"

"; 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 = "

"+user+":"+txt+"刚刚

"; 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;
客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心