在做评论发表,想要提交评论后整个页面不刷新,只刷新评论那里。用ajax,在form表单提交后,返回的data结果却是整个HTML文档,我不知道是哪里错了,还有查了下说用iframe局部刷新的,没用过,没找到例子。郁闷了大半天了,实在是不会呀!!恳请各位帮帮忙,感激不尽!
$(document).ready(function () {
$('.follow_btn').click(function () {
var $me = $(this);
var action = $me.attr('action');
var params = {
follow_id: '571c1ff13f27a7c841bcb545',
_csrf: 'fXBHtb9V-702e5JdP5zYvGqfvKBz4mqPXfv0'
};
$.post('/user/' + action, params, function (data) {
if (data.status === 'success') {
var $btns = $('.follow_btn');
if (action === 'follow') {
$btns.html('取消关注');
$btns.attr('action', 'un_follow');
} else {
$btns.html('加入关注');
$btns.attr('action', 'follow');
}
$btns.toggleClass('btn-success');
}
}, 'json');
});
});
照着这段代码改一下
@yakczh 你好啊,很不好意思麻烦你,我试着改了一下,报了个 500 (Internal Server Error) 错误 。如果data是序列化表单的话可以请求成功,但那样返回了整个HTML网页,只有刷新才能看到新的评论。
//jade页面
form#commentForm(method="POST",action="/user/comment")
input(type="hidden",name="comment[movie]",value="#{movie._id}")
if user
input(type="hidden",name="comment[from]",value="#{user._id}")
textarea(name="comment[content]")
.con-btn
button(type='button',class='user-has-sign') 提交
//
$('#commentForm .con-btn button').click(function(){
var data = {
movie:$('#commentForm').find('input').eq(0).val(),
user:$('#commentForm').find('input').eq(1).val(),
comment:$('#commentForm').find('textarea').val()
};
// var data=$('#commentForm').serialize();
$.post('/user/comment', data, function (data) {
console.log(status)
if (data.status === 'success') {
console.log(data)
}else{
console.log('err')
}
}, 'json');
})
// ERROR http://localhost:3000/user/comment 500 (Internal Server Error)
—是不是后台这里有问题?
var Comment = require(’.../models/comment.js’);
exports.save= function(req, res){
var _comment=req.body.comment;
var movieId=_comment.movie;
//回复
if(_comment.cid){
Comment.findById(_comment.cid,function(err,comment){
if(err){
console.log(err)
}
var reply={
from:_comment.from,
to:_comment.tid,
content:_comment.content
}
comment.reply.push(reply)
comment.save(function(err,comment){
if(err){
console.log(err)
}
res.redirect('/movie/'+movieId)
})
})
}
//新的评论
else{
var comment=new Comment(_comment);
comment.save(function(err,comment){
if(err){
console.log(err)
}
res.redirect('/movie/'+movieId)
})
}
};
你用ajax将评论的数据发送到接口保存,然后接口只返回成功失败,在ajax请求成功后接受数据只需要判断成功失败就可以了呀,然后将用户输入的评论获取到用jquery将内容渲染到页面评论列表里不就好了
@liygheart 可是ajax的data返回的是整个HTML文档,不知道为啥是这个。 还是要在后台怎样设置一下返回保存后的评论。如果是返回整个HTML页面,我操作了一下动态生成DOM节点,结果data数据不能操作,难道是有什么方法操作吗? 还是我打开方式不对 ...
//新的评论
else{
var comment=new Comment(_comment);
comment.save(function(err,comment){
if(err){
console.log(err)
}
res.redirect('/movie/'+movieId)
})
}
这是你保存评论的操作?
如果是的话,返回不要重定向,将res.redirect() 换成 res.send({status: "success"}); 然后ajax里的dataType设置成json,接受到的数据就是json数据了
@liygheart 啊,成功了! 真是太谢谢了, res.send({status: ‘success’,comment:comment}) 这样就行了! 非常感谢你的帮助,小白不懂纠结了好久 。