PHP development post comment function tutorial jQuery
Create a complete index.html page
First let’s look at the function of reading the comment list. When the page is loaded, use the getJSON method to read it. The JSON data generated by server-side PHP is displayed to the user.
$(function(){
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){ ["comment"]+"<span>"
+array["addtime"]+"</span></p>"; );
});
});
Saving comments to the database is processed on the 'comment.php' page
var comments = $("#comments");
$.getJSON("server.php",function(json){
$.each(json,function(index,array){ ["comment"]+"<span>"
+array["addtime"]+"</span></p>"; );
});
});
It can be seen that the JSON data needs to be read through the $.each loop, because the generated JSON data has multiple comments. Of course you can also use a for loop, but I prefer to use jQuery's $.each loop.
Let’s take a look at the front-end code of the comment function.
$("#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>Just</span></p>"; Posted successfully! ").fadeOut(1000);
().html(msg).fadeOut(1000); Combined with CSS page
index.htm Complete code
We see that reading comments is in 'server. php' page processingvar 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>Just</span></p>"; Posted successfully! ").fadeOut(1000);
().html(msg).fadeOut(1000); Combined with CSS page
index.htm Complete code
<!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>Saving comments to the database is processed on the 'comment.php' page
Let's write our PHP page
||
<!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>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
