ajax加载评论内容,评论列表通过ajax方式怎么加载

唐彡公子2018-08-17 12:00:102楼

已经实现,讲一下思路,老师看看这样是否妥当

1、详情页加载时按照后台查询并模板赋值方式,在前台通过volist实现首次加载

2、详情页进入后发布评论,前台通过ajax提交评论新增,后台执行新增并在成功后多表获取数据并返回给模板

3、前台接收到返回数据后,通过for循环遍历出数据并加载到评论列表中

前台代码:

if (datas.status == 1) {

$('#result').text(datas.message);

var str = "";

$("#comm").html("");

for (var i = 0; i < datas.data.length; i++) {

str = '

' +

'

'+ datas.data[i].name +'   ' + timestampToTime(datas.data[i].create_time) + '

' +

'

' + datas.data[i].content + '
' +

'


' +

'

';

$("#comm").append(str);

}

$("#comment")[0].reset();

} else {

$('#result').text(datas.message);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,没有直接涉及到mui.ajax评论功能的实现方法。但是,我们可以根据mui.post()和mui.ajax()的使用方法,结合后端接口实现评论功能。具体实现步骤如下: 1.前端页面中添评论输入框和提交按钮,并在提交按钮的点击事件中调用mui.post()方法,将评论内容发送到后端接口。 2.后端接口接收到前端发送的评论内容后,将评论内容存储到数据库中。 3.前端页面中添评论列表,通过mui.ajax()方法向后端接口请求评论列表数据,并将数据渲染到评论列表中。 4.用户可以在评论列表中查看其他用户的评论,并可以进行回复或点赞等操作。 示例代码如下: ```javascript //前端页面中添评论输入框和提交按钮 <div class="comment-input"> <input type="text" placeholder="请输入评论内容"> <button class="btn-submit">提交</button> </div> //前端页面中添评论列表 <ul class="comment-list"> <li class="comment-item"> <div class="comment-content">这是一条评论</div> <div class="comment-action"> <span class="reply">回复</span> <span class="like">点赞</span> </div> </li> <li class="comment-item"> <div class="comment-content">这是另一条评论</div> <div class="comment-action"> <span class="reply">回复</span> <span class="like">点赞</span> </div> </li> </ul> //前端页面中调用mui.post()方法提交评论内容 mui('.btn-submit').on('tap', function() { var content = document.querySelector('.comment-input input').value; mui.post('http://127.0.0.1/comment', {content: content}, function(data) { if(data == 'success') { mui.toast('评论成功'); //评论成功后重新评论列表 loadCommentList(); } else { mui.toast('评论失败'); } }); }); //前端页面中调用mui.ajax()方法请求评论列表数据 function loadCommentList() { mui.ajax('http://127.0.0.1/commentList', { dataType: 'json', type: 'get', success: function(data) { var html = ''; for(var i = 0; i < data.length; i++) { html += '<li class="comment-item">'; html += '<div class="comment-content">' + data[i].content + '</div>'; html += '<div class="comment-action">'; html += '<span class="reply">回复</span>'; html += '<span class="like">点赞</span>'; html += '</div>'; html += '</li>'; } document.querySelector('.comment-list').innerHTML = html; }, error: function(xhr, type, errorThrown) { mui.toast('获取评论列表失败'); } }); } //相关问题: --相关问题--:

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值