Tutorial fungsi komen pos pembangunan PHP jQuery
Buat halaman index.html yang lengkap
Mula-mula mari kita lihat fungsi membaca senarai komen Apabila halaman dimuatkan, gunakan kaedah getJSON untuk membacanya Data JSON yang dijana oleh PHP sebelah pelayan dipaparkan kepada pengguna.
$(function(){
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){
var txt = "<p><strong>"+array["user"]+"</strong>："+array ["komen"]+"<span>"
+array["addtime"]+"</span></p>"; );
});
});
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){
var txt = "<p><strong>"+array["user"]+"</strong>："+array ["komen"]+"<span>"
+array["addtime"]+"</span></p>"; );
});
});
Dapat dilihat bahawa data JSON perlu dibaca melalui gelung $.each, kerana data JSON yang dijana mempunyai berbilang ulasan. Sudah tentu anda juga boleh menggunakan gelung for, tetapi saya lebih suka menggunakan gelung $.each jQuery.
Mari kita lihat pada kod bahagian hadapan fungsi ulasan.
$("#add").klik(function(){
var user = $("#user").val();
var txt = $(" #txt").val();
$.ajax({
taip: "POST",
url: "comment.php",
data: "user="+user+"&txt ="+txt,
kejayaan: function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong> ："+txt+"<span>Just</span></p>";
?????????? komen.append(str); Berjaya disiarkan! ").fadeOut(1000);??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????().html( msg).fadeOut(1000);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? lengkap ee
Kami lihat bahawa membaca komen berada dalam pemprosesan halaman 'server'
Menyimpan ulasan ke pangkalan data dilakukan dalam pemprosesan halaman 'comment.php'
Mari tulis halaman PHP kami di bawah
var user = $("#user").val();
var txt = $(" #txt").val();
$.ajax({
taip: "POST",
url: "comment.php",
data: "user="+user+"&txt ="+txt,
kejayaan: function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong> ："+txt+"<span>Just</span></p>";
?????????? komen.append(str); Berjaya disiarkan! ").fadeOut(1000);??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????().html( msg).fadeOut(1000);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? lengkap ee
Kami lihat bahawa membaca komen berada dalam pemprosesan halaman 'server'
Menyimpan ulasan ke pangkalan data dilakukan dalam pemprosesan halaman 'comment.php'
Mari tulis halaman PHP kami di bawah
||
<!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>
