评论的标签如下: ~~~ {qb:comment name="xxxxx" rows='5'} HTML代码片段 {/qb:comment} ~~~ 评论涉及到的元素有 `{posturl}` 这个是代表POST评论内容到哪个网址 `{pageurl}` 这个是代表显示更多页评论的地址 基本流程, 一个是评论区的内容. 一个是提交按钮.一个是数据提交处理事件  其中 ~~~ <textarea name="textfield" id="comment_content"></textarea> ~~~ 这个是评论区的内容. 这里的元素有一个 `id="comment_content"` 方便JS事件获取里边的内容 面下面这个就是评论按钮 ~~~ <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()"> ~~~ 这里有一个点击事件 `post_commentPc()` 他是JS处理评论事件 下面这段就是表单POST的JS处理事件 ~~~ <script type="text/javascript"> var posturl = "{posturl}"; //POST数据到指定网址 var commentpage = 1; //默认显示第一页的数据 var havepost = false; //做个标志,不要重复提交数据 //POST评论内容 function post_commentPc(){ if(havepost===true){ layer.alert("请不要重复提交数据"); return ; } var contents = $('#comment_content').val(); //获取评论内容 if(contents==''){ layer.alert("请输入评论内容！"); }else{ havepost = true; //做个标志,不要重复提交 $.post( posturl, //提交到指定网址 {content:contents}, //提交的评论内容 function(res,status){ if(res.code==0){ //评论成功 $('#comment_content').val(''); //清空评论区的内容 $('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上 commentpage = 1; //恢复到第一页 layer.msg('发表成功！'); HiddenShowMoreComment(); //这里统计是否有分页,这个可删除 }else{ //评论失败 layer.alert('评论发表失败:'+res.msg); } havepost = false; //允许再次发表评论 } ); } } </script> ~~~ 发表评论这一块的完整代码如下: ~~~ <div class="PostComment"> <div class="head">我要留言</div> <dl> <dt>内容:</dt> <dd> <textarea name="textfield" id="comment_content"></textarea> </dd> </dl> <div class="sub"> <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()"> </div> </div> <script type="text/javascript"> var posturl = "{posturl}"; //POST数据到指定网址 var commentpage = 1; //默认显示第一页的数据 var havepost = false; //做个标志,不要重复提交数据 //POST评论内容 function post_commentPc(){ if(havepost===true){ layer.alert("请不要重复提交数据"); return ; } var contents = $('#comment_content').val(); //获取评论内容 if(contents==''){ layer.alert("请输入评论内容！"); }else{ havepost = true; //做个标志,不要重复提交 $.post( posturl, //提交到指定网址 {content:contents}, //提交的评论内容 function(res,status){ if(res.code==0){ //评论成功 $('#comment_content').val(''); //清空评论区的内容 $('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上 commentpage = 1; //恢复到第一页 layer.msg('发表成功！'); HiddenShowMoreComment(); //这里统计是否有分页,这个可删除 }else{ //评论失败 layer.alert('评论发表失败:'+res.msg); } havepost = false; //允许再次发表评论 } ); } } </script> ~~~ 下面这个图是显示评论内容的处理  代码如下: `id="show_comment"` 给DIV定义一个容器存放更多页的评论显示 `{volist name="listdb" id="rs"} 代码段 {/volist}` 这里是把默认第一页的评论循环显示出来 `onclick="Show_MoreComment()"` 这个是点击事件,显示更多评论 `{pageurl}` 这个是评论更多数据的调用地址 ~~~ <div class="ShowComment"> <div class="head">用户留言</div> <div id="show_comment"> {volist name="listdb" id="rs"} <div class="ListComment"> <dl> <dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt> <dd>{$rs.content}</dd> </dl> <div class="moreinfo"> 称呼:{$rs.username} 日期:{$rs.time} <A HREF="#">删除</A> </div> </div> {/volist} </div> <div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div> </div> <br> <script type="text/javascript"> //显示更多数据 function Show_MoreComment(){ commentpage++; $.get('{pageurl}?page='+commentpage,function(res){ if(res.code==0){ if(res.data==''){ layer.msg('显示完了！'); $('.ShowMoreComment button').hide();; }else{ $('#show_comment').append(res.data); //更多评论数据调用成功,追加显示 } }else{ layer.msg(res.msg,{time:2500}); } }); } //判断是否有更多页数据 function HiddenShowMoreComment(){ var Comments=$('#show_comment .ListComment').length; if(parseInt(Comments/{$cfg_array.rows})<1){ $('.ShowMoreComment').hide(); }else{ $('.ShowMoreComment').show(); } } HiddenShowMoreComment(); </script> ~~~ 评论的完整代码如下 ~~~ <div class="PostComment"> <div class="head">我要留言</div> <dl> <dt>内容:</dt> <dd> <textarea name="textfield" id="comment_content"></textarea> </dd> </dl> <div class="sub"> <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()"> </div> </div> <script type="text/javascript"> var posturl = "{posturl}"; //POST数据到指定网址 var commentpage = 1; //默认显示第一页的数据 var havepost = false; //做个标志,不要重复提交数据 //POST评论内容 function post_commentPc(){ if(havepost===true){ layer.alert("请不要重复提交数据"); return ; } var contents = $('#comment_content').val(); //获取评论内容 if(contents==''){ layer.alert("请输入评论内容！"); }else{ havepost = true; //做个标志,不要重复提交 $.post( posturl, //提交到指定网址 {content:contents}, //提交的评论内容 function(res,status){ if(res.code==0){ //评论成功 $('#comment_content').val(''); //清空评论区的内容 $('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上 commentpage = 1; //恢复到第一页 layer.msg('发表成功！'); HiddenShowMoreComment(); //这里统计是否有分页,这个可删除 }else{ //评论失败 layer.alert('评论发表失败:'+res.msg); } havepost = false; //允许再次发表评论 } ); } } </script> <div class="ShowComment"> <div class="head">用户留言</div> <div id="show_comment"> {volist name="listdb" id="rs"} <div class="ListComment"> <dl> <dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt> <dd>{$rs.content}</dd> </dl> <div class="moreinfo"> 称呼:{$rs.username} 日期:{$rs.time} <A HREF="#">删除</A> </div> </div> {/volist} </div> <div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div> </div> <br> <script type="text/javascript"> //显示更多数据 function Show_MoreComment(){ commentpage++; //第几页 $.get('{pageurl}?page='+commentpage,function(res){ if(res.code==0){ if(res.data==''){ layer.msg('显示完了！'); $('.ShowMoreComment button').hide();; }else{ $('#show_comment').append(res.data); //更多评论数据调用成功,追加显示 } }else{ layer.msg(res.msg,{time:2500}); } }); } //判断是否有更多页数据 , 并不重要 function HiddenShowMoreComment(){ var Comments=$('#show_comment .ListComment').length; if(parseInt(Comments/{$cfg_array.rows})<1){ $('.ShowMoreComment').hide(); }else{ $('.ShowMoreComment').show(); } } HiddenShowMoreComment(); </script> ~~~