Создание 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 

         ... 

Проблема в том, когда я пытаюсь POST формы с 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 (комментарий и csrf).

Почему производится вторая POST?

У меня есть несколько типов форм на странице, например. форму комментариев, форму голосования и т. д., и я хочу сделать все из них AJAX. Это хорошая идея реализовать их все с помощью вышеупомянутого метода?

Answer 1

Второй POST с данными вашей формы отправляется, потому что ваш обработчик события submit не возвращает False. Если вы хотите, чтобы форма не отправлялась при нажатии кнопки отправки, вы должны вернуть False в обработчике событий. Обработчик события также может быть предупрежден, чтобы предотвратить отправку формы, вызвав e.preventDefault() на объект события, который передается обработчику submit.

Причина этого поведения в том, что по умолчанию событие, запущенное при нажатии кнопки отправки, отправляет формы в самом конце цепочки обработки событий. Итак, что происходит, так это то, что в обработчике событий вы отправляете вызов AJAX POST (который является асинхронным), и в следующий же момент обработчик возвращается без предупреждения о событии из представления формы. Это приводит к отправке как AJAX, так и form.

e.preventDefault() Сообщает событию e, чтобы избежать действия по умолчанию, связанного с этим событием, в этом случае подать форму. При добавлении этого параметра, когда $.ajax заканчивается, и все обработчики выполняются с обработкой события, проверяется обработчик по умолчанию, если он разрешен для запуска. Поскольку вы предотвратили это, ничего не происходит.

Тот же самый метод может быть использован, например, запретить веб-страницу после ссылки <a> при нажатии.