ajax - 对基于类的 View 进行 AJAX POST

Question

我有一个基于类的 View ，它显示页面并处理 POST 请求，如下所示:

 class citywall (View):


        def get(self, request, *args, **kwargs):
            template_name = 'citywall.html'
            city_slug = kwargs['city_slug']
            context = self.get_context_data(city_slug)
            return render_to_response(template_name, context, RequestContext(request))



        def post(self, request, *args, **kwargs):       



            if request.is_ajax:                        
                if request.POST.has_key('comment'):
                        #process comment
                        ...
                if request.POST.has_key('vote'):
                        #process vote

                      ...

问题是当我尝试使用 AJAX 发布表单时，发送了两个请求。 Ajax 请求，然后是常规 POST 请求。

这是我在 html 中的评论表单:

<form class="comment_form" data-id="{{post.id}}" method="POST" >{% csrf_token %}
   <textarea  rows = "1"  name="comment" class="form-control" placeholder="Write a comment..." ></textarea>
   <button type="submit" class="btn btn-info">Go!</button>
</form>

这是 jQuery 代码:

var comment_form = $('.comment_form')
   comment_form.submit(function(){

   var post_id = $(this).data('id');
   var comment = $(this).find('textarea[name="comment"]').val();
   $.ajax({
            url: "",
            dataType:"json",
            type:"POST",
            data:{

              comment: comment,
              post_id: post_id,
              csrfmiddlewaretoken:'{{csrf_token}}',
            },
            success:function(json)
            {

               alert(json);


            },

        });     
 }); 

当我提交表单时，会发生这种情况:

1. AJAX POST 是用它的 json data(post_id, comment, csrf) 制作的。

2. 在浏览器中收到对 AJAX 帖子的响应。

3. POST 是用 html 表单数据(评论和 csrf)制作的。

为什么要进行第二个 POST？

例如，我在页面上有几种类型的表单。评论表、投票表等，我想将它们全部制作成 AJAX。用上面提到的方法实现所有这些是个好主意吗？

Answer 1

第二个POST与您的表单数据一起发送是因为您的 submit事件处理程序不返回 False .如果你想阻止点击提交按钮时提交表单，你必须返回False在事件处理程序中。也可以通过调用 e.preventDefault() 告诉事件处理程序阻止表单提交。在传递给 submit 的事件对象上处理程序。

此行为的原因是，默认情况下，单击提交按钮时触发的事件会在事件处理链的最末端提交表单。那么发生的事情是，在您的事件处理程序中，您发送了一个 AJAX POST调用(异步)，然后处理程序立即返回，而不会阻止事件提交表单。这导致 AJAX和 form正在发送。

e.preventDefault()讲述事件e避免执行特定于此事件的默认操作，在本例中为表单提交。加上这个，当$.ajax完成并且所有处理程序都完成处理事件，检查默认处理程序是否允许运行。由于您已经阻止了它，因此什么也不会发生。

可以使用完全相同的方法，例如阻止网页跟随链接 <a>单击时。