我正在构建一个社交媒体web应用程序，并试图通过ajax动态添加帖子和评论。帖子被成功添加，但评论没有被添加，因为成功事件没有触发。即使错误事件没有被触发。但是AJAX调用正在完成(我通过在调用之前、在成功事件和错误事件中以及在调用之后添加console.log语句来检查它)。
下面是我写的代码:-这是使用类初始化AJAX调用的代码(问题是在createComment方法中，其余的代码是用于参考createComment中使用的其他方法):-
class PostComments{
// constructor is used to initialize the instance of the class whenever a new instance is created
constructor(postId){
this.postId = postId;
this.postContainer = $(`#post-${postId}`);
this.newCommentForm = $(`#post-${postId}-comments-form`);
this.createComment(postId);
let self = this;
// call for all the existing comments
$(' .delete-comment-button', this.postContainer).each(function(){
self.deleteComment($(this));
});
}
createComment(postId){
let pSelf = this;
this.newCommentForm.submit(function(e){
e.preventDefault();
let self = this;
$.ajax({
method: 'post',
url: '/comments/create',
data: $(self).serialize(),
success: function(data, textStatus, xhr){
console.log(data);
let newComment = pSelf.newCommentDom(data.data.comment, data.data.comment_user);
$(`#post-comments-${postId}`).prepend(newComment);
pSelf.deleteComment($(' .delete-comment-button', newComment));
new Noty({
theme: 'nest',
text: "Comment published!",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function(error){
console.log(error.responseText);
}
});
});
}
newCommentDom(comment, comment_user){
// I've added a class 'delete-comment-button' to the delete comment link and also id to the comment's li
return $(`<li id="comment-${ comment._id }">
<p>
<small>
<a class="delete-comment-button" href="/comments/destroy/${comment._id}">X</a>
</small>
${comment.content}
<br>
<small>
${comment_user}
</small>
</p>
</li>`);
}
deleteComment(deleteLink){
$(deleteLink).click(function(e){
e.preventDefault();
$.ajax({
method: 'get',
url: $(deleteLink).prop('href'),
success: function(data){
$(`#comment-${data.data.comment_id}`).remove();
new Noty({
theme: 'nest',
text: "Comment Deleted",
type: 'success',
layout: 'topRight',
timeout: 1500
}).show();
},
error: function(error){
console.log(error.responseText);
}
});
});
}
}
这是我的控制器操作创建注释的代码:-
module.exports.create = async function(req, res){
try{
let post = await Post.findById(req.body.post);
if (post){
let comment = await Comment.create({
content: req.body.content,
post: req.body.post,
user: req.user._id
});
post.comments.push(comment);
post.save();
let comment_user = await Comment.find(comment._id).populate('user');
if (req.xhr){
return res.status(200).json({
data: {
comment: comment,
comment_user: comment_user.user.name
},
message: "Comment created!"
});
}
req.flash('success', 'Comment published!');
res.redirect('/');
}
}catch(err){
req.flash('error', err);
return;
}
}
这是我的帖子和评论视图部分:-
posts.ejs
<li id="post-<%= post._id %>">
<p>
<% if (locals.user && locals.user.id == post.user.id){ %>
<small>
<a class="delete-post-button" href="/posts/destroy/<%= post.id %>">X</a>
</small>
<% } %>
<%= post.content %>
<br>
<small>
-<%= post.user.name %>
</small>
</p>
<div class="post-comments">
<% if (locals.user){ %>
<!-- let's give an id to the new comment form, we'll also need to make the same changes in home_posts.js where we're adding a post to the page -->
<form id="post-<%= post._id %>-comments-form" action="/comments/create" method="POST">
<input type="text" name="content" placeholder="Add Comment..." required>
<input type="hidden" name="post" value="<%= post._id %>" >
<button type="submit">Add</button>
</form>
<% } %>
<div class="post-comments-list">
<ul id="post-comments-<%= post._id %>">
<% for (comment of post.comments){%>
<%- include('_comment') -%>
<%} %>
</ul>
</div>
</div>
</li>
comments.ejs
<li id="comment-<%= comment._id %>">
<p>
<% if(locals.user && (locals.user.id == comment.user.id || locals.user.id == post.user.id)){ %>
<small>
<a class="delete-comment-button" href="/comments/destroy/<%= comment.id %>">X</a>
</small>
<% } %>
<%= comment.content %>
<br>
<small>
<%= comment.user.name %>
</small>
</p>
</li>
编辑:-我在开发人员工具中检查了请求，发现它永远悬而未决
待处理请求截图
问题已解决。在控制器动作中，我写了Comment.find(comment._id)而不是Comment.findById(comment._id)，这就是为什么由于await关键字，它永远挂起并且成功回调没有触发。