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>发表评论</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>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
