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>發(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> 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
