PHP開發(fā) 發(fā)表評論功能教程之jQuery
創(chuàng)建完整index.html頁面
首先來看讀取評論列表功能，當(dāng)頁面加載的時候，使用getJSON方法讀取服務(wù)端PHP生成的JSON數(shù)據(jù)，展示給用戶。
$(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);
});
});
});
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循環(huán)，讀取JSON數(shù)據(jù)，因為生成的JSON數(shù)據(jù)有多條評論。當(dāng)然你也可以使用for循環(huán)，但我更傾向于使用jQuery的$.each循環(huán)。
再來看下發(fā)表評論功能的前端代碼。
$("#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("發(fā)表成功！").fadeOut(1000);
$("#txt").attr("value","");
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
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("發(fā)表成功！").fadeOut(1000);
$("#txt").attr("value","");
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
我們將前面的HTML和CSS頁面結(jié)合在一起
index.htm 完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發(fā)表評論</title>
<style type="text/css">
.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
}
</style>
<script src="//cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(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);
});
});
$("#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("發(fā)表成功！").fadeOut(1000);
$("#txt").attr("value","");
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<div id="comments">
<h3>評論列表</h3>
</div>
<div id="post">
<h3>發(fā)表評論</h3>
<p>昵稱：</p>
<p><input type="text" class="input" id="user" /></p>
<p>評論內(nèi)容：</p>
<p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
<p><input type="submit" value="發(fā)表" id="add" /></p>
<div id="message"></div>
</div>
</div>
</body>
</html>我們看到讀取評論是在‘server.php’頁面處理
將評論保存到數(shù)據(jù)庫是在‘comment.php’頁面處理
下面我們來寫我們的PHP頁面吧
