[关闭]
@liayun 2016-05-14T10:08:46.000000Z 字数 8500 阅读 1734

知问前端--Ajax提交评论

知问前端

本文开始主要实现Ajax评论功能，包括Ajax显示评论，提交评论，加载更多等等操作。

一、显示评论表单

首先，HTML结构要组织好，此文关注的HMTL代码如下：

  1. <div id="main">
  2.     <div class="main_left">
  3.         <div id="tabs">
  4.             <ul>
  5.                 <li><a href="tab1.html">tab1</a></li>
  6.                 <li><a href="tab2.html">tab2</a></li>
  7.                 <li><a href="tab3.html">tab3</a></li>
  8.             </ul>
  9.         </div>
  10.         <div class="content">
  11.             <h4>liayun 发表于 2016-05-07</h4>
  12.             <h3>外貌和魅力方面被打击该如何调整心态？</h3>
  13.             <div class="editor">
  14.                 问题描述内容...
  15.             </div>
  16.             <div class="bottom">
  17.                 <span class="comment">0条评论</span> 
  18.                 <span class="down">显示全部</span>
  19.                 <span class="up">收起</span>
  20.             </div>
  21.             <hr noshade="noshade" size="1" />
  22.             <!-- 评论列表区 -->
  23.             <div class='comment_list'>
  24.                 <!-- 显示的评论列表 -->
  25.                 <dl class='comment_content'>
  26.                     <!-- 第一条评论 -->
  27.                     <dt>liayun</dt>
  28.                     <dd>如果祖辈的资源和条件不是因为你自己想用而用的话，这会转变成一种巨大的压力。</dd>
  29.                     <dd class='date'>2016-05-13</dd>
  30.                     <!-- 第二条评论 -->
  31.                     <dt>liayun</dt>
  32.                     <dd>如果祖辈的资源和条件不是因为你自己想用而用的话，这会转变成一种巨大的压力。</dd>
  33.                     <dd class='date'>2016-05-13</dd>
  34.                     <!-- 第三条评论 -->
  35.                     <dt>liayun</dt>
  36.                     <dd>如果祖辈的资源和条件不是因为你自己想用而用的话，这会转变成一种巨大的压力。</dd>
  37.                     <dd class='date'>2016-05-13</dd>
  38.                 </dl>
  39.                 <!-- 评论表单 -->
  40.                 <form>
  41.                     <dl class='comment_add'>
  42.                         <dt><textarea name='comment'></textarea></dt>
  43.                         <dd><input type='button' value='发表' /></dd>
  44.                     </dl>
  45.                 </form>
  46.             </div>
  47.         </div>
  48.     </div>
  49.     <div class="main_right">
  50.         <div id="accordion">
  51.             <h3>菜单1</h3>
  52.             <div><p>内容1</p><p>内容1</p></div>
  53.             <h3>菜单2</h3>
  54.             <div>内容2</div>
  55.             <h3>菜单3</h3>
  56.             <div>内容3</div>
  57.         </div>
  58.     </div>
  59. </div>

进一步，只关注评论列表class='comment_list'的<div>。
CSS修饰样式如下：

  1. .content .comment {
  2.     color:#369;
  3.     cursor:pointer;
  4. }
  5. .content .comment_list {
  6.     border: 1px solid #ccc;
  7.     border-radius: 4px;
  8.     padding: 5px 10px;
  9.     display: none;  /* 初始评论列表区隐藏 */
  10. }
  11. .content .comment_list dl {
  12.     margin: 0;
  13.     padding: 3px 0 5px 0;
  14. }
  15. .content .comment_list dl dt {
  16.     margin: 0;
  17.     padding: 5px 0 0 0;
  18.     color: #369;
  19. }
  20. .content .comment_list dl dd {
  21.     margin: 0;
  22.     padding: 0;
  23.     color: #333;
  24.     line-height: 180%;
  25. }
  26. .content .comment_list dl dd.date {
  27.     color: #666;
  28. }
  29. .content .comment_list dl.comment_content {
  30.     border-bottom: 1px solid #ccc;
  31. }
  32. .content .comment_add {
  33.     text-align: right;
  34. }
  35. .content .comment_add textarea {
  36.     width: 98%;
  37.     border: 1px solid #ccc;
  38.     border-radius: 4px;
  39.     background: #fff; 
  40.     padding: 5px;
  41.     font-size: 12px;
  42.     color: #666;
  43.     resize: none;
  44. }
  45. .content .comment_add input {
  46.     cursor:pointer;
  47. }

此刻，添加完CSS样式之后，HTML代码我们实际写为：

  1. <div id="main">
  2.     <div class="main_left">
  3.         <div id="tabs">
  4.             <ul>
  5.                 <li><a href="tab1.html">tab1</a></li>
  6.                 <li><a href="tab2.html">tab2</a></li>
  7.                 <li><a href="tab3.html">tab3</a></li>
  8.             </ul>
  9.         </div>
  10.         <div class="content">
  12.         </div>
  13.     </div>
  14.     <div class="main_right">
  15.         <div id="accordion">
  16.             <h3>菜单1</h3>
  17.             <div><p>内容1</p><p>内容1</p></div>
  18.             <h3>菜单2</h3>
  19.             <div>内容2</div>
  20.             <h3>菜单3</h3>
  21.             <div>内容3</div>
  22.         </div>
  23.     </div>
  24. </div>

接下来，实现点击评论字样展开评论表单的功能：
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'>0条评论</span> <span class='up'>收起</span></div><hr noshade='noshade' size='1' /><div class='comment_list'></div>";
  11.         });
  12.         $(".content").append(html);
  14.         $.each($(".editor"), function(index, value) {
  15.             arr[index] = $(value).html();
  16.             summary[index] = arr[index].substr(0, 200);
  18.             if (summary[index].substring(199, 200) == "<") {
  19.                 summary[index] = replacePos(summary[index], 200, "");
  20.             }
  21.             if (summary[index].substring(198, 200) == "</") {
  22.                 summary[index] = replacePos(summary[index], 200, "");
  23.                 summary[index] = replacePos(summary[index], 199, "");
  24.             }
  26.             if(arr[index].length > 200) {
  27.                 summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题，显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效
  28.                 $(value).html(summary[index]);
  29.             }
  30.             $(".bottom .up").hide();
  31.         });
  33.         //动态绑定，用委托绑定处理
  34.         $.each($(".editor"), function(index, value) {
  35.             $(this).on("click", ".down", function() {
  36.                 $(".editor").eq(index).html(arr[index]);
  37.                 $(this).hide();
  38.                 $(".bottom .up").eq(index).show();
  39.             });
  40.         });
  42.         //统一处理
  43.         $.each($(".bottom"), function(index, value) {
  44.             $(this).on("click", ".up", function() {
  45.                 $(".editor").eq(index).html(summary[index]);
  46.                 $(this).hide();
  47.                 $(".editor .down").eq(index).show();
  48.             });
  49.         });
  51.         $.each($(".bottom"), function(index, value) {
  52.             $(this).on("click", ".comment", function() {
  53.                 if($.cookie("user")) {
  54.                     // 点击评论字样只允许评论表单出现一次
  55.                     if(!$(".comment_list").eq(index).has("form").length) {       
  56.                         $(".comment_list").eq(index).append("<form><dl class='comment_add'><dt><textarea name='comment'></textarea></dt><dd><input type='button' value='发表' /></dd></dl></form>");
  57.                     }
  58.                     if($(".comment_list").eq(index).is(":hidden")) {
  59.                         $(".comment_list").eq(index).show();
  60.                     } else {
  61.                         $(".comment_list").eq(index).hide();
  62.                     }
  63.                 } else {
  64.                     $("#error").dialog("open");
  65.                     setTimeout(function() {
  66.                         $("#error").dialog("close");
  67.                         $("#login").dialog("open");
  68.                     }, 1000);
  69.                 }
  70.             });
  71.         });
  72.     }
  73. });

二、提交评论

创建数据表：comment，字段分别为：id、titleid、user、comment、date等字段。
comment表的结构如图：
知问前端--评论表
add_comment.php：

  1. <?php
  3.     sleep(1);
  5.     require 'config.php';
  7.     $query = "INSERT INTO comment (titleid, comment, user, date) VALUES ('{$_POST['titleid']}', '{$_POST['comment']}', '{$_POST['user']}', NOW())";
  9.     mysql_query($query) or die('新增失败！'.mysql_error());
  11.     echo mysql_affected_rows();
  13.     mysql_close();
  14. ?>

由于要上传titleid，所以还需从数据表content表中查出id，即show_content.php修改为：

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

此时，0条评论字样增加一个自定义属性data-id，第一次碰到，要注意，所以此时变为：

  1. <span class='comment' data-id='" + value.id + "'>0条评论</span>

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 + "'>0条评论</span> <span class='up'>收起</span></div><hr noshade='noshade' size='1' /><div class='comment_list'></div>";
  11.         });
  12.         $(".content").append(html);
  14.         $.each($(".editor"), function(index, value) {
  15.             arr[index] = $(value).html();
  16.             summary[index] = arr[index].substr(0, 200);
  18.             if (summary[index].substring(199, 200) == "<") {
  19.                 summary[index] = replacePos(summary[index], 200, "");
  20.             }
  21.             if (summary[index].substring(198, 200) == "</") {
  22.                 summary[index] = replacePos(summary[index], 200, "");
  23.                 summary[index] = replacePos(summary[index], 199, "");
  24.             }
  26.             if(arr[index].length > 200) {
  27.                 summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题，显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效
  28.                 $(value).html(summary[index]);
  29.             }
  30.             $(".bottom .up").hide();
  31.         });
  33.         //动态绑定，用委托绑定处理
  34.         $.each($(".editor"), function(index, value) {
  35.             $(this).on("click", ".down", function() {
  36.                 $(".editor").eq(index).html(arr[index]);
  37.                 $(this).hide();
  38.                 $(".bottom .up").eq(index).show();
  39.             });
  40.         });
  42.         //统一处理
  43.         $.each($(".bottom"), function(index, value) {
  44.             $(this).on("click", ".up", function() {
  45.                 $(".editor").eq(index).html(summary[index]);
  46.                 $(this).hide();
  47.                 $(".editor .down").eq(index).show();
  48.             });
  49.         });
  51.         $.each($(".bottom"), function(index, value) {
  52.             $(this).on("click", ".comment", function() {
  53.                 if($.cookie("user")) {
  54.                     // 点击评论字样只允许评论表单出现一次
  55.                     if(!$(".comment_list").eq(index).has("form").length) {       
  56.                         $(".comment_list").eq(index).append("<form><dl class='comment_add'><dt><textarea name='comment'></textarea></dt><dd><input type='hidden' name='titleid' value='" + $(this).attr("data-id") + "' /><input type='hidden' name='user' value='" + $.cookie("user") + "' /><input type='button' value='发表' /></dd></dl></form>");
  57.                     }
  58.                     if($(".comment_list").eq(index).is(":hidden")) {
  59.                         $(".comment_list").eq(index).show();
  60.                     } else {
  61.                         $(".comment_list").eq(index).hide();
  62.                     }
  63.                     $(".comment_list").eq(index).find("input[type=button]").button().click(function() {
  64.                         //alert("123");
  65.                         //alert($(".comment_list").eq(index).find("form").find("textarea").val());
  66.                         var _this = this; // this指代按钮对象
  67.                         $(".comment_list").eq(index).find("form").ajaxSubmit({
  68.                             url : "add_comment.php",
  69.                             type : "post",
  70.                             beforeSubmit:function(formData,jqForm,options) {
  71.                                 $("#loading").dialog("open");
  72.                                 $(_this).button("disable"); //禁用发布按钮
  73.                             },
  74.                             success:function(responseText,statusText) {
  75.                                 //alert(responseText); //新增成功，返回1
  76.                                 if(responseText) {
  77.                                     $(_this).button("enable");
  78.                                     $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  80.                                     setTimeout(function() {
  81.                                         $("#loading").dialog("close");
  82.                                         $(".comment_list").eq(index).find("form").resetForm(); //重置表单
  83.                                         $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  84.                                     }, 1000);
  85.                                 }
  86.                             }
  87.                         });
  88.                     });
  89.                 } else {
  90.                     $("#error").dialog("open");
  91.                     setTimeout(function() {
  92.                         $("#error").dialog("close");
  93.                         $("#login").dialog("open");
  94.                     }, 1000);
  95.                 }
  96.             });
  97.             //$(".comment_add").eq(index).find("input").button();
  98.             //$(".comment_list").eq(index).find("input[type=button]").button(); //按钮样式不会发生改变，所以应紧紧接着表单生成，并显示之后
  99.         });
  100.     }
  101. });
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注