当我使用ajax在Django中提交评论表单时,页面将重定向到空白页面,向我显示成功数据:
{"status":"success", "msg":"添加成功"}
,但不要停留在当前页面。我希望页面停留在当前页面并向我显示新评论。
这是我的update_comment视图:
def update_comment(request, news_pk): news = get_object_or_404(News, id=news_pk) comment_form = CommentForm(request.POST or None) if request.method == 'POST' and comment_form.is_valid(): if not request.user.is_authenticated: return render(request, 'login.html', {}) comments = comment_form.cleaned_data.get("comment") news_comment = NewsComments(user=request.user, comments=comments, news=news) news_comment.save() # return redirect(reverse('news:news_detail', kwargs={'news_pk': news.id})) return HttpResponse('{"status":"success", "msg":"添加成功"}', content_type='application/json') else: return HttpResponse('{"status":"fail", "msg":"添加失败"}', content_type='application/json')
这是我的ajax:
$(document).on('submit', 'comment_form', function(e){ e.preventDefault(); $.ajax({ cache: false, type: "POST", url:"{% url 'operation:update_comment' news.id %}", data:{'news_pk':{{ news.id }}, 'comments':comments}, async: true, beforeSend:function(xhr, settings){ xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}"); }, success: function(data) { if(data.status == 'fail'){ if(data.msg == '用户未登录'){ window.location.href="login"; }else{ alert(data.msg) } }else if(data.status == 'success'){ window.location.reload();//refresh current page. } }, }); });
这是我的表格:
<form id="comment_form" action="{% url 'operation:update_comment' news.id %}" method="POST" > {% csrf_token %} <textarea id="comment_textarea"name="comment"></textarea> <input type="submit" value="Submit"> </input> </form>
终于我做到了!感谢上帝!非常兴奋!
我以前的代码中有三个主要问题。
首先:由于ajax会将news_pk发布到视图 update_comment ,所以我不需要在此视图的url和template(在<form>tag的url和ajax的url中)中添加news_pk ,所以我删除了它们或数据仍会通过Form,但不会通过Ajax。
<form>
第二:我的绑定不正确,我在表单上有单击处理程序,应该是提交处理程序。如果将其绑定到按钮,则可以使用单击处理程序。但是对于这一部分,我仍然有些困惑,在按钮顶峰方式和表单提交方式之间。
第三个问题是我误认为’comments’和’comment’。’comment’是的name属性<textarea>,forms.py通过该属性获取数据。
<textarea>
注释是由ajax定义的, var comments=$("#js-pl-textarea").val(),因此在视图中我需要使用comments = request.POST.get("comments", "")但不需要注释,这就是“发布失败”的原因。
var comments=$("#js-pl-textarea").val(),
comments = request.POST.get("comments", "")
以下是我的代码。
这是ajax:
$("#comment_form").submit(function(){ var comments = $("#js-pl-textarea").val() $.ajax({ cache: false, type: "POST", url:"{% url 'operation:update_comment' %}", data:{'news_pk':{{ news.pk }}, 'comments':comments}, async: true, beforeSend:function(xhr, settings){ xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}"); }, success: function(data) { if(data.status == 'fail'){ if(data.msg == '用户未登录'){ window.location.href="login"; }else{ alert(data.msg) } }else if(data.status == 'success'){ window.location.reload();//refresh current page. } }, }); return false; });
这是我的udate_comment视图:
@login_required def update_comment(request): news_pk = request.POST.get("news_pk", 0) comments = request.POST.get("comments", "") if int(news_pk) > 0 and comments: news_comments = NewsComments() news = News.objects.get(id=int(news_pk)) news_comments.news = news news_comments.comments = comments news_comments.user = request.user news_comments.save() return HttpResponse('{"status":"success", "msg":"添加成功"}', content_type='application/json') else: return HttpResponse('{"status":"fail", "msg":"添加失败"}', content_type='application/json')
这是模板中的表格:
<form id="comment_form" action="{% url 'operation:update_comment'%}" method="POST" > {% csrf_token %} <textarea id="js-pl-textarea"name="comment"></textarea> <input type="submit" value="Submit"> </input> </form>
非常感谢大家的回覆!有了您的回覆,我逐步找出了这些问题!