[关闭]
@liayun 2016-05-14T14:36:24.000000Z 字数 14602 阅读 1891

知问前端--Ajax显示评论

知问前端

本文开始主要实现Ajax显示评论功能。

一、显示评论

从question表中查出问题描述时，还要显示此问题共有多少条评论，所以得修改show_content.php为：

  1. <?php
  2.     require 'config.php';
  3.     $query = mysql_query("SELECT (SELECT COUNT(*) FROM comment WHERE titleid = a.id) AS count,a.id,a.title,a.content,a.user,a.date FROM question a ORDER BY a.date DESC LIMIT 0,10") or die('SQL 错误！');
  4.     $json = '';
  5.     while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
  6.         //json格式转码
  7.         foreach ( $row as $key => $value ) {
  8.             $row[$key] = urlencode(str_replace("\n","", $value));
  9.             $row[$key] = urlencode(str_replace("\t","", $value));
  10.         }
  11.         $json .= urldecode(json_encode($row)).',';
  12.         //$json .= json_encode($row).','; //得到json格式
  13.         //print_r($row); //以php数组的形式显示出来，javascript不能直接用，那么最好将其保存为json格式
  14.     }
  15.     //echo $json;
  16.     echo '['.substr($json, 0, strlen($json) - 1).']'; //一个json数组，一个数组有3个对象，每个对象就是一个json
  17.     mysql_close();
  18. ?>

要点：

  1. ajax远程加载comment表数据时，只加载一次。即$.ajax();只能在以下代码块中使用：

    1. if(!$(".comment_list").eq(index).has("form").length) {
    2.         $.ajax(...);
    3. }

    而不能在以下代码块中使用：

    1. if($(".comment_list").eq(index).is(":hidden")) {
    2.     	$(".comment_list").eq(index).show();
    3.     	//$.ajax(); //远程加载不应放在这儿
    4. }

  2. 顺序问题：
    ①评论列表显示在前，评论表单在后，所以得在ajax请求成功后，一起显现出来。
    ②评论表单生成后，然后依理才能提交评论表单到数据表。

所以以下jQuery代码就会有问题：

  1. $.ajax({
  2.     url : "show_content.php",
  3.     type : "post",
  4.     success : function(response, status, xhr) {
  5.         var json = $.parseJSON(response); 
  6.         var html = "";
  7.         var arr = [];
  8.         var summary = [];
  9.         $.each(json, function(index, value) {
  10.             html += "<h4>" + value.user + " 发表于 " + value.date + "</h4><h3>"+value.title+"</h3><div class='editor'>" + value.content + "</div><div class='bottom'><span class='comment' data-id='" + value.id + "'>" + value.count + "条评论</span> <span class='up'>收起</span></div><hr noshade='noshade' size='1' /><div class='comment_list'></div>";
  11.         });
  12.         $(".content").append(html);
  13.         $.each($(".editor"), function(index, value) {
  14.             arr[index] = $(value).html();
  15.             summary[index] = arr[index].substr(0, 200);
  16.             if (summary[index].substring(199, 200) == "<") {
  17.                 summary[index] = replacePos(summary[index], 200, "");
  18.             }
  19.             if (summary[index].substring(198, 200) == "</") {
  20.                 summary[index] = replacePos(summary[index], 200, "");
  21.                 summary[index] = replacePos(summary[index], 199, "");
  22.             }
  23.             if(arr[index].length > 200) {
  24.                 summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题，显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效
  25.                 $(value).html(summary[index]);
  26.             }
  27.             $(".bottom .up").hide();
  28.         });
  29.         //动态绑定，用委托绑定处理
  30.         $.each($(".editor"), function(index, value) {
  31.             $(this).on("click", ".down", function() {
  32.                 $(".editor").eq(index).html(arr[index]);
  33.                 $(this).hide();
  34.                 $(".bottom .up").eq(index).show();
  35.             });
  36.         });
  37.         //统一处理
  38.         $.each($(".bottom"), function(index, value) {
  39.             $(this).on("click", ".up", function() {
  40.                 $(".editor").eq(index).html(summary[index]);
  41.                 $(this).hide();
  42.                 $(".editor .down").eq(index).show();
  43.             });
  44.         });
  45.         $.each($(".bottom"), function(index, value) {
  46.             $(this).on("click", ".comment", function() {
  47.                 var comment_this = this;
  48.                 if($.cookie("user")) {
  49.                     // 点击评论字样只允许评论表单出现一次
  50.                     if(!$(".comment_list").eq(index).has("form").length) {
  51.                         $.ajax({
  52.                             url : "show_comment.php",
  53.                             type : "post",
  54.                             beforeSend : function(jqXHR, settings) {
  55.                                 $(".comment_list").eq(index).append("<dl class='comment_load'><dd>正在加载评论</dd></dl>");
  56.                             },
  57.                             success : function(response, status) {
  58.                                 $(".comment_list").eq(index).find(".comment_load").hide();
  60.                                 var json_comment = $.parseJSON(response); 
  61.                                 $.each(json_comment, function(index2, value) {
  62.                                     $(".comment_list").eq(index).append("<dl class='comment_content'><dt>" + value.user + "</dt><dd>" + value.comment + "</dd><dd class='date'>" + value.date + "</dd></dl>");
  63.                                 });
  64.                                 $(".comment_list").eq(index).append("<form><dl class='comment_add'><dt><textarea name='comment'></textarea></dt><dd><input type='hidden' name='titleid' value='" + $(comment_this).attr("data-id") + "' /><input type='hidden' name='user' value='" + $.cookie("user") + "' /><input type='button' value='发表' /></dd></dl></form>");
  65.                             }
  66.                         });
  67.                     }
  68.                     if($(".comment_list").eq(index).is(":hidden")) {
  69.                         $(".comment_list").eq(index).show();
  70.                     } else {
  71.                         $(".comment_list").eq(index).hide();
  72.                     }
  73.                     //ajax远程加载，可能延迟1s、2s、3s
  74.                     //此时的表单在加载之前就已经执行了，会导致无法提交表单，而且按钮变成初始状态
  75.                     $(".comment_list").eq(index).find("input[type=button]").button().click(function() {
  76.                         //alert("123");
  77.                         //alert($(".comment_list").eq(index).find("form").find("textarea").val());
  78.                         var _this = this; // this指代按钮对象
  79.                         $(".comment_list").eq(index).find("form").ajaxSubmit({
  80.                             url : "add_comment.php",
  81.                             type : "post",
  82.                             beforeSubmit:function(formData,jqForm,options) {
  83.                                 $("#loading").dialog("open");
  84.                                 $(_this).button("disable"); //禁用发布按钮
  85.                             },
  86.                             success:function(responseText,statusText) {
  87.                                 //alert(responseText); //新增成功，返回1
  88.                                 if(responseText) {
  89.                                     $(_this).button("enable");
  90.                                     $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  91.                                     setTimeout(function() {
  92.                                         $("#loading").dialog("close");
  93.                                         $(".comment_list").eq(index).find("form").resetForm(); //重置表单
  94.                                         $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  95.                                     }, 1000);
  96.                                 }
  97.                             }
  98.                         });
  99.                     });
  100.                 } else {
  101.                     $("#error").dialog("open");
  102.                     setTimeout(function() {
  103.                         $("#error").dialog("close");
  104.                         $("#login").dialog("open");
  105.                     }, 1000);
  106.                 }
  107.             });
  108.         });
  109.     }
  110. });

正确的jQuery代码为：

  1. $.ajax({
  2.     url : "show_content.php",
  3.     type : "post",
  4.     success : function(response, status, xhr) {
  5.         var json = $.parseJSON(response); 
  6.         var html = "";
  7.         var arr = [];
  8.         var summary = [];
  9.         $.each(json, function(index, value) {
  10.             html += "<h4>" + value.user + " 发表于 " + value.date + "</h4><h3>"+value.title+"</h3><div class='editor'>" + value.content + "</div><div class='bottom'><span class='comment' data-id='" + value.id + "'>" + value.count + "条评论</span> <span class='up'>收起</span></div><hr noshade='noshade' size='1' /><div class='comment_list'></div>";
  11.         });
  12.         $(".content").append(html);
  13.         $.each($(".editor"), function(index, value) {
  14.             arr[index] = $(value).html();
  15.             summary[index] = arr[index].substr(0, 200);
  16.             if (summary[index].substring(199, 200) == "<") {
  17.                 summary[index] = replacePos(summary[index], 200, "");
  18.             }
  19.             if (summary[index].substring(198, 200) == "</") {
  20.                 summary[index] = replacePos(summary[index], 200, "");
  21.                 summary[index] = replacePos(summary[index], 199, "");
  22.             }
  23.             if(arr[index].length > 200) {
  24.                 summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题，显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效
  25.                 $(value).html(summary[index]);
  26.             }
  27.             $(".bottom .up").hide();
  28.         });
  29.         //动态绑定，用委托绑定处理
  30.         $.each($(".editor"), function(index, value) {
  31.             $(this).on("click", ".down", function() {
  32.                 $(".editor").eq(index).html(arr[index]);
  33.                 $(this).hide();
  34.                 $(".bottom .up").eq(index).show();
  35.             });
  36.         });
  37.         //统一处理
  38.         $.each($(".bottom"), function(index, value) {
  39.             $(this).on("click", ".up", function() {
  40.                 $(".editor").eq(index).html(summary[index]);
  41.                 $(this).hide();
  42.                 $(".editor .down").eq(index).show();
  43.             });
  44.         });
  45.         $.each($(".bottom"), function(index, value) {
  46.             $(this).on("click", ".comment", function() {
  47.                 var comment_this = this;
  48.                 if($.cookie("user")) {
  49.                     // 点击评论字样只允许评论表单出现一次
  50.                     if(!$(".comment_list").eq(index).has("form").length) {
  51.                         $.ajax({
  52.                             url : "show_comment.php",
  53.                             type : "post",
  54.                             beforeSend : function(jqXHR, settings) {
  55.                                 $(".comment_list").eq(index).append("<dl class='comment_load'><dd>正在加载评论</dd></dl>");
  56.                             },
  57.                             success : function(response, status) {
  58.                                 $(".comment_list").eq(index).find(".comment_load").hide();
  60.                                 var json_comment = $.parseJSON(response); 
  61.                                 $.each(json_comment, function(index2, value) {
  62.                                     $(".comment_list").eq(index).append("<dl class='comment_content'><dt>" + value.user + "</dt><dd>" + value.comment + "</dd><dd class='date'>" + value.date + "</dd></dl>");
  63.                                 });
  64.                                 $(".comment_list").eq(index).append("<form><dl class='comment_add'><dt><textarea name='comment'></textarea></dt><dd><input type='hidden' name='titleid' value='" + $(comment_this).attr("data-id") + "' /><input type='hidden' name='user' value='" + $.cookie("user") + "' /><input type='button' value='发表' /></dd></dl></form>");
  66.                                 $(".comment_list").eq(index).find("input[type=button]").button().click(function() {
  67.                                     //alert("123");
  68.                                     //alert($(".comment_list").eq(index).find("form").find("textarea").val());
  69.                                     var _this = this; // this指代按钮对象
  70.                                     $(".comment_list").eq(index).find("form").ajaxSubmit({
  71.                                         url : "add_comment.php",
  72.                                         type : "post",
  73.                                         beforeSubmit:function(formData,jqForm,options) {
  74.                                             $("#loading").dialog("open");
  75.                                             $(_this).button("disable"); //禁用发布按钮
  76.                                         },
  77.                                         success:function(responseText,statusText) {
  78.                                             //alert(responseText); //新增成功，返回1
  79.                                             if(responseText) {
  80.                                                 $(_this).button("enable");
  81.                                                 $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  82.                                                 setTimeout(function() {
  83.                                                     $("#loading").dialog("close");
  84.                                                     $(".comment_list").eq(index).find("form").resetForm(); //重置表单
  85.                                                     $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  86.                                                 }, 1000);
  87.                                             }
  88.                                         }
  89.                                     });
  90.                                 });
  91.                             }
  92.                         });
  93.                     }
  94.                     if($(".comment_list").eq(index).is(":hidden")) {
  95.                         $(".comment_list").eq(index).show();
  96.                     } else {
  97.                         $(".comment_list").eq(index).hide();
  98.                     }
  99.                 } else {
  100.                     $("#error").dialog("open");
  101.                     setTimeout(function() {
  102.                         $("#error").dialog("close");
  103.                         $("#login").dialog("open");
  104.                     }, 1000);
  105.                 }
  106.             });
  107.         });
  108.     }
  109. });

可以对class='comment_load'修饰：

  1. .content .comment_load dd {
  2.     background: url(img/comment_load.gif) no-repeat 75px 45%;
  3. }

提交评论时，自动显示为在第一条的位置，实现方法即为在表单重置之前，将新的评论数据置为第一条目录，修改评论提交代码如下：

  1. $(".comment_list").eq(index).find("input[type=button]").button().click(function() {
  2.     //alert("123");
  3.     //alert($(".comment_list").eq(index).find("form").find("textarea").val());
  4.     var _this = this;
  5.     $(".comment_list").eq(index).find("form").ajaxSubmit({
  6.         url : "add_comment.php",
  7.         type : "post",
  8.         beforeSubmit:function(formData,jqForm,options) {
  9.             $("#loading").dialog("open");
  10.             $(_this).button("disable"); //禁用发布按钮
  11.         },
  12.         success:function(responseText,statusText) {
  13.             //alert(responseText); //新增成功，返回1
  14.             if(responseText) {
  15.                 $(_this).button("enable");
  16.                 $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  18.                 setTimeout(function() {
  19.                     var date = new Date();
  20.                     $("#loading").dialog("close");
  22.                     $(".comment_list").eq(index).prepend('<dl class="comment_content"><dt>' + $.cookie('user') + '</dt><dd>' + $('.comment_list').eq(index).find('textarea').val() + '</dd><dd>' + date.getFullYear() + '-' + (date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + '</dd></dl>');
  24.                     $(".comment_list").eq(index).find("form").resetForm(); //重置表单
  25.                     $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  26.                 }, 1000);
  27.             }
  28.         }
  29.     });
  30. });

二、分页显示评论

以上代码还有问题：
问题一，无论点击哪个问题下的评论，均全部显示评论表comment中全部评论，而非显示对应问题下的评论。
问题二，即分页显示评论。
两者解决办法：
show_comment.php代码：

  1. <?php
  2.     sleep(1);
  4.     require 'config.php';
  6.     $_sql = mysql_query("SELECT COUNT(*) AS count FROM comment WHERE titleid = '{$_POST['titleid']}'");
  7.     $_result = mysql_fetch_array($_sql, MYSQL_ASSOC);
  8.     //echo $_result['count'];
  10.     $_pagesize = 2;
  12.     $_count = ceil($_result['count'] / $_pagesize);
  13.     //echo $_count;
  15.     $_page = 1;
  16.     if(!isset($_POST['page'])) {
  17.         $_page = 1;
  18.     } else {
  19.         $_page = $_POST['page'];
  20.         if($_page > $_count) {
  21.             $_page = $_count;
  22.         }
  23.     }
  25.     $_limit = ($_page - 1) * $_pagesize;
  27.     $query = mysql_query("SELECT ({$_count}) AS count,titleid,comment,user,date FROM comment WHERE titleid = '{$_POST['titleid']}' ORDER BY date DESC LIMIT {$_limit},{$_pagesize}") or die('SQL 错误！');
  29.     $json = '';
  31.     while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
  32.         //json格式转码
  33.         foreach ( $row as $key => $value ) {
  34.             $row[$key] = urlencode(str_replace("\n","", $value));
  35.             $row[$key] = urlencode(str_replace("\t","", $value));
  36.         }
  37.         $json .= urldecode(json_encode($row)).',';
  38.         //$json .= json_encode($row).','; //得到json格式
  39.         //print_r($row); //以php数组的形式显示出来，javascript不能直接用，那么最好将其保存为json格式
  40.     }
  42.     //echo $json;
  44.     echo '['.substr($json, 0, strlen($json) - 1).']'; //一个json数组，一个数组有3个对象，每个对象就是一个json
  46.     mysql_close();
  47. ?>

jQuery代码如下：

  1. $.each($(".bottom"), function(index, value) {
  2.     $(this).on("click", ".comment", function() {
  3.         var comment_this = this;
  4.         //alert("123");
  5.         if($.cookie("user")) {
  6.             if(!$(".comment_list").eq(index).has("form").length) {
  7.                 $.ajax({
  8.                     url : "show_comment.php",
  9.                     type : "post",
  10.                     data : {
  11.                         titleid : $(comment_this).attr("data-id")
  12.                     },
  13.                     beforeSend : function(jqXHR, settings) {
  14.                         $(".comment_list").eq(index).append("<dl class='comment_load'><dd>正在加载评论</dd></dl>");
  15.                     },
  16.                     success : function(response, status) {
  17.                         $(".comment_list").eq(index).find(".comment_load").hide();
  18.                         // 初始加载第1页(每页2条评论)
  19.                         var json_comment = $.parseJSON(response);
  20.                         var count = 0;
  21.                         $.each(json_comment, function(index2, value) {
  22.                             //alert(value.count); //查询总页数
  23.                             count = value.count;
  24.                             $(".comment_list").eq(index).append("<dl class='comment_content'><dt>" + value.user + "</dt><dd>" + value.comment + "</dd><dd class='date'>" + value.date + "</dd></dl>");
  25.                         });
  27.                         $(".comment_list").eq(index).append("<dl><dd><span class='load_more'>加载更多评论</span></dd></dl>");
  28.                         // 有了"加载更多评论"按钮，则从第2页开始加载评论
  29.                         var page = 2;
  30.                         // 如果评论总数<=2，"加载更多评论"按钮的click事件销毁，并隐藏
  31.                         if (page > count) { 
  32.                             //将click事件销毁掉，所以用on()事件
  33.                             $(".comment_list").eq(index).find(".load_more").off("click");
  34.                             $(".comment_list").eq(index).find(".load_more").hide();
  35.                         }
  36.                         $(".comment_list").eq(index).find(".load_more").button().on("click", function() {
  37.                             $(".comment_list").eq(index).find(".load_more").button("disable");
  38.                             $.ajax({
  39.                                 url : "show_comment.php",
  40.                                 type : "post",
  41.                                 data : {
  42.                                     titleid : $(comment_this).attr("data-id"),
  43.                                     page : page //将要显示的第x页的x传递到服务器
  44.                                 },
  45.                                 beforeSend : function(jqXHR, settings) {
  46.                                     $(".comment_list").eq(index).find(".load_more").html("<img src = 'img/more_load.gif' />");
  47.                                 },
  48.                                 success : function(response, status) {
  49.                                     var json_comment_more = $.parseJSON(response); 
  50.                                     $.each(json_comment_more, function(index3, value) {
  51.                                     $(".comment_list").eq(index).find(".comment_content").last().after("<dl class='comment_content'><dt>" + value.user + "</dt><dd>" + value.comment + "</dd><dd class='date'>" + value.date + "</dd></dl>");
  52.                                     });
  53.                                     $(".comment_list").eq(index).find(".load_more").button("enable");
  54.                                     $(".comment_list").eq(index).find(".load_more").html("加载更多评论");
  55.                                     page++; //不断显示下一页
  56.                                     // 要查询的页数超过总页数，"加载更多评论"按钮的click事件销毁，并隐藏
  57.                                     if (page > count) { 
  58.                                         //将click事件销毁掉，所以用on()事件
  59.                                         $(".comment_list").eq(index).find(".load_more").off("click");
  60.                                         $(".comment_list").eq(index).find(".load_more").hide();
  61.                                     }
  62.                                 }
  63.                             });
  64.                         });
  65.                         $(".comment_list").eq(index).append("<form><dl class='comment_add'><dt><textarea name='comment'></textarea></dt><dd><input type='hidden' name='titleid' value='" + $(comment_this).attr("data-id") + "' /><input type='hidden' name='user' value='" + $.cookie("user") + "' /><input type='button' value='发表' /></dd></dl></form>");
  67.                         // 所以type="button"的按钮的click事件要放置在表单生成之后
  68.                         $(".comment_list").eq(index).find("input[type=button]").button().click(function() {
  69.                             //alert("123");
  70.                             //alert($(".comment_list").eq(index).find("form").find("textarea").val());
  71.                             var _this = this;
  72.                             $(".comment_list").eq(index).find("form").ajaxSubmit({
  73.                                 url : "add_comment.php",
  74.                                 type : "post",
  75.                                 beforeSubmit:function(formData,jqForm,options) {
  76.                                     $("#loading").dialog("open");
  77.                                     $(_this).button("disable"); //禁用发布按钮
  78.                                 },
  79.                                 success:function(responseText,statusText) {
  80.                                     //alert(responseText); //新增成功，返回1
  81.                                     if(responseText) {
  82.                                         $(_this).button("enable");
  83.                                         $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  85.                                         setTimeout(function() {
  86.                                             var date = new Date();
  87.                                             $("#loading").dialog("close");
  88.                                             $(".comment_list").eq(index).prepend('<dl class="comment_content"><dt>' + $.cookie('user') + '</dt><dd>' + $('.comment_list').eq(index).find('textarea').val() + '</dd><dd>' + date.getFullYear() + '-' + (date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + '</dd></dl>');
  90.                                             $(".comment_list").eq(index).find("form").resetForm(); //重置表单
  91.                                             $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  92.                                         }, 1000);
  93.                                     }
  94.                                 }
  95.                             });
  96.                         });
  97.                     }
  98.                 });
  99.             }
  100.             if($(".comment_list").eq(index).is(":hidden")) {
  101.                 $(".comment_list").eq(index).show();
  102.                 //$.ajax(); //远程加载不应放在这儿
  103.             } else {
  104.                 $(".comment_list").eq(index).hide();
  105.             }	
  106.         } else {
  107.             $("#error").dialog("open");
  108.             setTimeout(function() {
  109.                 $("#error").dialog("close");
  110.                 $("#login").dialog("open");
  111.             }, 1000);
  112.         }
  113.     });
  114. });

添加css样式：

  1. .content .load_more {
  2.     width: 100%;
  3.     margin: 10px 0 0 0;
  4.     height: 30px;
  5.     line-height: 30px;
  6. }
  7. .content .load_more img {
  8.     padding: 5px 0 0 0;
  9. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注