PHP開發(fā) 發(fā)表評論功能教學(xué)之jQuery
建立完整index.html頁面
首先來看讀取評論清單功能，當(dāng)頁面載入的時候，使用getJSON方法讀取服務(wù)端PHP產(chǎn)生的JSON數(shù)據(jù)，展示給使用者。
$(function(){?
????var?comments?=?$("#comments");?
#????$.getJSON("server.php",function(json#????$.getJSON("server.php",function(json){
????????$.each(json,function(index,array){?
????????????var?["comment"]+"<span>"?
+array["addtime"]+"</span></p>";?
???????);?
????});?
});?
????var?comments?=?$("#comments");?
#????$.getJSON("server.php",function(json#????$.getJSON("server.php",function(json){
????????$.each(json,function(index,array){?
????????????var?["comment"]+"<span>"?
+array["addtime"]+"</span></p>";?
???????);?
????});?
});?
可以看出，需要透過$.each循環(huán)，讀取JSON數(shù)據(jù)，因為產(chǎn)生的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",?
?????user="+user+"&txt ="+txt,?
?????????success:?function(msg){?
?????????????"<p><strong>"+user+"</strong> ："+txt+"<span>剛</span></p>";?
??????????????message").show().html("發(fā)表成功！????????????$("#message").show ().html(msg).fadeOut(1000);?
#????????????}?
????????)?}??
???????和CSS頁面結(jié)合在一起
index.htm?完整程式碼
#
????var?user?=?$("#user").val();?
????var?txt?$$$(" #txt").val();?
????$.ajax({?
?????????type:?"POST",?
?????user="+user+"&txt ="+txt,?
?????????success:?function(msg){?
?????????????"<p><strong>"+user+"</strong> ："+txt+"<span>剛</span></p>";?
??????????????message").show().html("發(fā)表成功！????????????$("#message").show ().html(msg).fadeOut(1000);?
#????????????}?
????????)?}??
???????和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>將評論儲存到資料庫是在'comment.php'頁面處理
#下面我們來寫我們的PHP頁面吧
