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);


            },

        });     
 });

当我提交表格时，这种情况正在发生：

使用json data（post_id，comment，csrf）制作AJAX POST。
在浏览器中收到对AJAX帖子的回复。
使用html form data进行POST（评论和csrf）。

为什么要制作第二个POST？

例如，我在页面上有几种类型的表单。评论表，投票表等，我想让所有这些都成为AJAX。用上述方法实现所有这些是一个好主意吗？

Answer 1

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

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

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

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

对基于类的视图进行AJAX POST

1 个答案: