将 AJAX POST 发送到基于类的视图

Question

我有一个基于类的视图，它显示一个页面并处理 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 form data(comment 和 csrf) 进行。

为什么要进行第二次 POST？

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

Answer 1

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

这种行为的原因是，默认情况下，单击提交按钮时触发的事件会在事件处理链的最后提交表单。所以发生的事情是，在您的事件处理程序中，您发送了一个AJAX POST 调用（这是异步的），并且处理程序在下一刻返回，而不会阻止事件提交表单。这会导致AJAX 和form 都被发送。

e.preventDefault() 告诉事件e 避免执行特定于该事件的默认操作，在本例中为表单提交。添加后，当$.ajax 完成并且所有处理程序都处理完事件时，检查默认处理程序是否允许运行。既然你阻止了它，什么都不会发生。

可以使用相同的方法，例如防止网页点击链接<a>。