对基于类的视图进行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 POST表单时,正在发送两个请求.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在事件处理程序中返回.还可以通过调用e.preventDefault()传递给submit处理程序的事件对象来告知事件处理程序以防止表单提交.

此行为的原因是,默认情况下,单击提交按钮时触发的事件会在事件处理链的最末端提交表单.所以会发生的事情是,在您的事件处理程序中,您发送一个AJAX POST调用(这是异步的),并且处理程序返回的下一刻不会阻止表单提交事件.这导致双方AJAX和form发送.

e.preventDefault()告诉事件e避免执行特定于此事件的默认操作,在本例中为表单提交.添加$.ajax完成后,当完成并处理完所有处理程序后,将检查默认处理程序是否允许运行.既然你已经阻止它,没有任何反应.

可以使用相同的方法,例如,<a>在单击时阻止链接后的网页.