PHP開發 發表評論功能教學之jQuery
建立完整index.html頁面
首先來看讀取評論清單功能，當頁面載入的時候，使用getJSON方法讀取服務端PHP產生的JSON數據，展示給使用者。
$(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循環，讀取JSON數據，因為產生的JSON數據有多條評論。當然你也可以使用for循環，但我更傾向於使用jQuery的$.each循環。
再來看下發表評論功能的前端程式碼。
$("#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("發表成功！ $("#message").show ().html(msg).fadeOut(1000);
# }
) }
和CSS頁面結合在一起
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("發表成功！ $("#message").show ().html(msg).fadeOut(1000);
# }
) }
和CSS頁面結合在一起
index.htm 完整程式碼
#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表评论</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("发表成功！").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>发表评论</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>
</div>
</body>
</html>將評論儲存到資料庫是在'comment.php'頁面處理
#下面我們來寫我們的PHP頁面吧
下一節
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表评论</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("发表成功！").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>发表评论</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>
</div>
</body>
</html>
暫無