Tutoriel sur la fonction de commentaire de post-développement PHP jQuery
Créer une page index.html complète
Regardons d'abord la fonction de lecture de la liste des commentaires Lorsque la page est chargée, utilisez. la méthode getJSON pour le lire. Les données JSON générées par PHP côté serveur sont affichées à l'utilisateur.
$(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); );
});
});
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); );
});
});
On peut voir que les données JSON doivent être lues via la boucle $.each, car les données JSON générées comportent plusieurs commentaires. Bien sûr, vous pouvez également utiliser une boucle for, mais je préfère utiliser la boucle $.each de jQuery.
Jetons un coup d'œil au code frontal de la fonction de commentaire.
$("#add").click(function(){
var user = $("#user").val();
var txt = $(" #txt").val();
$.ajax({
type : "POST",
url : "comment.php",
données : "user="+user+"&txt ="+txt,
succès : function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong> ："+txt+"<span>Just</span></p>";
comments.append(str); Publié avec succès ! " .fadeOut(1000);
; ().html( msg).fadeOut(1000);
Combiné avec la page CSS
index.htm code complet
var user = $("#user").val();
var txt = $(" #txt").val();
$.ajax({
type : "POST",
url : "comment.php",
données : "user="+user+"&txt ="+txt,
succès : function(msg){
if(msg==1){
var str = "<p><strong>"+user+"</strong> ："+txt+"<span>Just</span></p>";
comments.append(str); Publié avec succès ! " .fadeOut(1000);
; ().html( msg).fadeOut(1000);
Combiné avec la page CSS
index.htm code complet
<!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> Nous voyez que la lecture des commentaires se fait dans le traitement de la page 'server.php' L'enregistrement des commentaires dans la base de données se fait dans le traitement de la page 'comment.php'
Écrivons notre page PHP ci-dessous
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
