在使用Ajax创建博客后,我无法进行任何其他Ajax调用,JsonResponse返回空字符串



我已经建立了一个用户可以发帖的网站。在使用Ajax创建post对象之后,我似乎不喜欢它。基本上,我的django视图返回一个空的JsonData。所以我需要刷新页面才能工作。以下是我用来提交ajax调用的内容。

用于创建帖子:

var SaveForm =  function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = new FormData(this);
$.ajax({
url: $(this).attr('data-url'),
type: $(this).attr('method'),
data: form,
cache: false,
processData: false,
contentType: false,
dataType: 'json',
success: function(data){
if(data.form_is_valid){
$('#post-list div').html(data.posts);
$('#modal-post').modal('hide');
} else {
$('#modal-post .modal-content').html(data.html_form)
}
$('.post-like-form').on("click", ".likeBtn", function (e) {
var like_count = $(".input-like-count", this).val();
$(".like-count-d").text(like_count);
e.preventDefault();
if($(this).find("i").hasClass("fa-thumbs-up")){
like_count++;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
$(".like-count", this).text(like_count);
$(".like-count-d").text(like_count);
} else {
like_count--;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
$(".like-count", this).text(like_count);
$(".like-count-d").text(like_count);
}
var tk = $(this).attr("data-token");
var pg = $(this).attr('value');
$.ajax({
type: "POST",
url: $(this).attr("data-url"),
dataType: 'json',
data: {'guid_url': pg, 'csrfmiddlewaretoken':tk },
success: function (data){
var like_count = parseInt($(".like-count", this).text());
if($(this).find("i").hasClass("fa-thumbs-up")){
like_count++;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
$(".like-count", this).text(like_count);
} else {
like_count--;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
$(".like-count", this).text(like_count);
}
$("#post-detail-container div").html(data.post_detail)
},
error: function(rs, e){
console.log(rs.responeText);
},
});
});
}
})
return false;
}

成功地创建了post对象(这需要很多时间,基本上我的Ajax请求需要很长时间才能创建(。帖子创建后,我不能再喜欢这些帖子了,除非我刷新页面!

这是我的类js-ajax调用(我相信它不会引起问题,因为如果你引用页面,它确实有效:

$(document).ready(function (e) {
$('.post-like-form').on("click", ".likeBtn", function (e) {
var like_count = $(".input-like-count", this).val();
$(".like-count-d").text(like_count);
e.preventDefault();
if($(this).find("i").hasClass("fa-thumbs-up")){
like_count++;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
$(".like-count", this).text(like_count);
$(".like-count-d").text(like_count);
} else {
like_count--;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
$(".like-count", this).text(like_count);
$(".like-count-d").text(like_count);
}
var tk = $(this).attr("data-token");
var pg = $(this).attr('value');
$.ajax({
type: "POST",
url: $(this).attr("data-url"),
dataType: 'json',
data: {'guid_url': pg, 'csrfmiddlewaretoken':tk },
success: function (data){
var like_count = parseInt($(".like-count", this).text());
if($(this).find("i").hasClass("fa-thumbs-up")){
like_count++;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
$(".like-count", this).text(like_count);
} else {
like_count--;
$(".input-like-count", this).val(like_count);
$("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
$(".like-count", this).text(like_count);
}
$("#post-detail-container div").html(data.post_detail)
},
error: function(rs, e){
console.log(rs.responeText);
},
});
});
})

以下是我对点赞和创建帖子的看法:

@login_required
def post_create(request):
data = dict()
if request.method == 'POST':
form = PostForm(request.POST)
if form.is_valid():  
post = form.save(False)
post.author = request.user
post.save()
if request.FILES is not None:
added = []
images = request.FILES.getlist('images[]')
for i in images:
if i not in added:
print(i)
image_instance = Images.objects.create(image=i,post=post)
image_instance.save()
added.append(i)
data['form_is_valid'] = True
posts = Post.objects.all()
posts = Post.objects.order_by('-last_edited')
data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
else:
data['form_is_valid'] = False
else:
form = PostForm      
context = {
'form':form,
}
data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
return JsonResponse(data) 
@login_required
def post_like(request,guid_url):
data = dict()
post = get_object_or_404(Post, guid_url=guid_url)
user = request.user
if post.likes.filter(id=user.id).exists():
post.likes.remove(user)
else:
post.likes.add(user)
#posts = Post.objects.all()
#posts = Post.objects.order_by('-last_edited')
#data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
if request.is_ajax():
guid_url = post.guid_url
data['post_detail'] = render_to_string('home/posts/post_detail.html',{'post':post,'guid_url':guid_url},request=request)
return JsonResponse(data)

结果是,当我喜欢一篇帖子时,它会转到post-like url,而不是只喜欢这篇帖子。我不知道是什么导致了这个问题,因为我在控制台或终端中都没有错误。

我感谢所有提前提供的帮助!

只需注意,在内部ajax中需要一个带一行的分号。

data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request);

最新更新