我正在尝试使用Ajax发送我的评论表单,现在当用户插入评论时,整个页面都会刷新。我希望在不刷新页面的情况下很好地插入它。所以我尝试了一堆东西,但是没有运气。因为我是初学者,所以我尝试了许多教程链接。 https://realpython.com/blog/python/django-and-ajax-form-submissions/ https://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern- client-服务器通信实践/ comment-page-1 /#comment-1631
我意识到我的问题是我很难在views.py和forms.py中处理我的代码,因此在进行客户端编程(js和ajax)之前,我需要再次设置后端(python代码)以进行设置阿贾克斯 有人可以帮我吗?我不知道如何设置我的后端。
<div class="leave comment> <form method="POST" action='{% url "comment_create" %}' id='commentForAjax'>{% csrf_token %} <input type='hidden' name='post_id' value='{{ post.id }}'/> <input type='hidden' name='origin_path' value='{{ request.get_full_path }}'/> {% crispy comment_form comment_form.helper %} </form> </div> <div class='reply_comment'> <form method="POST" action='{% url "comment_create" %}'>{% csrf_token %} <input type='hidden' name='post_id' id='post_id' value='{% url "comment_create" %}'/> <input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/> <input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' /> {% crispy comment_form comment_form.helper %} </form> </div> <script> $(document).on('submit','.commentForAjax', function(e){ e.preventDefault(); $.ajax({ type:'POST', url:'comment/create/', data:{ post_id:$('#post_id').val(), origin_path:$('#origin_path').val(), parent_id:$('#parent_id').val(), csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val() }, success:function(json){
我不知道该怎么办…我尝试了但失败了..这里发生了什么})
这是我的forms.py
class CommentForm(forms.Form): comment = forms.CharField( widget=forms.Textarea(attrs={"placeholder": "leave your thoughts"}) ) def __init__(self, data=None, files=None, **kwargs): super(CommentForm, self).__init__(data, files, kwargs) self.helper = FormHelper() self.helper.form_show_labels = False self.helper.add_input(Submit('submit', 'leave your thoughts', css_class='btn btn-default',))
和我的views.py
def comment_create_view(request): if request.method == "POST" and request.user.is_authenticated() and request.is_ajax(): parent_id = request.POST.get('parent_id') post_id = request.POST.get("post_id") origin_path = request.POST.get("origin_path") try: post = Post.objects.get(id=post_id) except: post = None parent_comment = None if parent_id is not None: try: parent_comment = Comment.objects.get(id=parent_id) except: parent_comment = None if parent_comment is not None and parent_comment.post is not None: post = parent_comment.post form = CommentForm(request.POST) if form.is_valid(): comment_text = form.cleaned_data['comment'] if parent_comment is not None: # parent comments exists new_comment = Comment.objects.create_comment( user=MyProfile.objects.get(user=request.user), path=parent_comment.get_origin, text=comment_text, post = post, parent=parent_comment ) return HttpResponseRedirect(post.get_absolute_url()) else: new_comment = Comment.objects.create_comment( user=MyProfile.objects.get(user=request.user), path=origin_path, text=comment_text, post = post ) return HttpResponseRedirect(post.get_absolute_url()) else: messages.error(request, "There was an error with your comment.") return HttpResponseRedirect(origin_path) else: raise Http404
即使阅读了有关它的教程,我仍然对使用ajax的想法感到不满意… json如何发挥作用,我也应该如何修改views.py ....有人可以解释一下它们如何组合在一起吗?并帮助我完成此任务…
else: raise Http404
完全检查您的代码并与OP进行深入讨论之后。我设法解决了运营问题。
删除后,HttpResponseRedirect我首先将其转换为JsonResponse并进行了相应的更改。
HttpResponseRedirect
JsonResponse
response_data = { "status":200, "message":"comment_stored", "parent": True, "parent_id": parent_comment.id, "comment_count": parent_comment.comment_count() }
return JsonResponse(response_data)
下一步是简单地执行DOM操作以显示从响应中获取的数据。但是事实证明,这比预期的要复杂。因此,为简化起见,我将模板分为两部分-一部分将是主要部分,另一部分仅包含注释的HTML。
使用,django.template.loader.render_to_string我生成了所需的HTML以显示注释,并与响应一起以JSON中的字符串形式发送。
django.template.loader.render_to_string
html = render_to_string('main/child_comment.html', {'comment': [new_comment], 'user': request.user, 'comment_form':comment_form }) response_data = { "status":200, "message":"comment_stored", "comment":html, "parent": True, "parent_id": parent_comment.id, "comment_count": parent_comment.comment_count() } return JsonResponse(response_data)
$('form').submit(function(e) { e.preventDefault(); if ($(this).parents("tr") != 0) { parent_id = $(this).parents("tr").attr("id").split("_")[1]; data_str = $(this).serialize() + "&parent_id=" + parent_id; } else { data_str = $(this).serialize(); } $(this).parents("tr").attr("id").split("_")[1] $.ajax({ type: 'POST', url: '{% url 'comment_create' %}', data: data_str, success: function(json) { alert(json.message); if (json.status == 200) { var comment = json.comment.trim(); var user = json.user; if (!json.parent) { $(comment).insertBefore('.table tr:first'); } else { $(comment).insertBefore('#comment_' + json.parent_id + ' #child_comment:first'); $(".replies").text("답글" + json.comment_count + "개 모두 보기"); } } }, error: function(response) { alert("some error occured. see console for detail"); } });
});