文章详情页面评论功能添加及实现原理
2018-01-08 21:17
555 查看
1.评论框及评论内容展示模板如下:
2.评论按钮点击时触发事件,通过ajax传递给后台
3.后台接收ajax传递的参数进行入库处理,如果入库成功则响应一块comment模板到评论下方
4.自定义comment的模板内容如下:
<!-- 发表评论 --> <div id="comment"> <h3><strong>发表评论:</strong></h3> <p><span>标题:</span> <input type="text" name="" id="comm_title" class="text"></p> <p><span>内容:</span><textarea rows="10" id="content" cols="30" class="text-textarea"></textarea></p> <p style="text-align:right;"><button class="btn">发表</button></p> </div>
2.评论按钮点击时触发事件,通过ajax传递给后台
//评论事件ajax处理 $('.btn').click(function(){ //取得title和content的值 var title=$('#comm_title').val(); var content=$('#content').val(); var url="{:U('Content/comment')}"; if(title==''||content==''){ alert("评论或标题为空!无法提交!"); return false; } var art_id="{$artInfo.art_id}"; $.get(url,{'art_id':art_id,'comm_title':title,'comm_content':content},function(data){ //将接受到到的静态模板放到评论区块下面 $('#comment').after(data); //将评论区域内容清空 $('#comm_title').val(''); $('#content').val(''); //刷新 location.reload(); }) })
3.后台接收ajax传递的参数进行入库处理,如果入库成功则响应一块comment模板到评论下方
/*提交添加评论信息的方法 return string */ function comment(){ $data=I('get.'); //添加入库时间 $data['comm_time']=time(); //数据入库 $res=M('comm')->add($data); if($res){ //如果添加成功则响应一块静态模板给前端 $this->assign('data',$data); $this->display(); }else{ echo '评论发布失败!'; } }
4.自定义comment的模板内容如下:
<div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle" src="__PUBLIC__/static/Home/images/touxiang.jpg" alt="媒体对象" width="80"></a> <div class="media-body"> <h4 class="media-heading"> <span class="pull-left">{$data.comm_title}</span> <time class="pull-right">{$data.comm_time|date="Y/m/d H:i:s",###}</time> </h4> <p>{$data.comm_content}<a href="javascript:void(0);" class="reply">回复</a></p> <br> <div style="display:none;"> <textarea name="" cols="50" rows="2"</textarea> <input type="button" class="replyBtn" data-id="{$data.comm_id}" value="提交"> </div> </div> </div>
相关文章推荐
- 文章详情页面回复功能添加及实现原理
- 利用AJAX实现WordPress中的文章列表及评论的分页功能
- Vue.js实现文章评论和回复评论功能
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- Ajax实现对静态页面的文章访问统计功能示例
- 使用layer弹层组件和javascript实现子页面添加文章后关闭子页面并刷新父页面
- 构建Postfix+Mysql+Dovecot邮件系统,实现以Web页面访问的功能、添加SASL认证以及TLS加密传输 推荐
- html中实现添加水印的功能 / 在jsp页面上直接打开PDF文件
- WordPress实现长篇文章/日志/单页面分页功能效果
- ASP.NET MVC 学习4、Controller中添加SearchIndex页面,实现简单的查询功能
- Django博客功能实现—文章评论的显示
- 在菜单栏添加黑名单页面,实现取消黑名单功能
- 为个人博客添加文章评论功能
- 博客项目实现文章评论功能(重点是评论回复)
- phpcms 内容——>评论管理 中添加 打开文章链接的 功能
- ios开发之--仿购物类详情页面数量添加小功能
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmUserEdit 添加评论功能页面效果
- WordPress - 新建页面添加可评论功能
- destoon实现公司新闻详细页添加评论功能的方法
- hexo使用next主题,并且使用”多说“给博客的文章添加评论功能