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 = ""+array["user"]+"："+array ["comment"]+""
+array["addtime"]+""
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 = ""+user+" ："+txt+"Just";
 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

section suivante

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Plein écran

Aucun