php发表评论代码,PHP开发 发表评论功能教程之jQuery

创建完整index.html页面

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

}

}

});

});

我们将前面的HTML和CSS页面结合在一起

index.htm 完整代码html>

发表评论

.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

}

$(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);

});

});

$("#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);

}

}

});

});

});

评论列表

发表评论

昵称：

评论内容：

我们看到读取评论是在‘server.php’页面处理

将评论保存到数据库是在‘comment.php’页面处理

下面我们来写我们的PHP页面吧