Form Submit Не пойман Javascript

Question

Я пытаюсь поймать отправку HTML-формы (рендеринга Django) и обрабатывать ее с помощью ajax, а не перенаправлять на новую страницу, однако функция javascript никогда не называется. Вот мой визуализации HTML:

<form action="" id="id_create_review" method="post"> 

<div id="div_id_session" class="form-group"> 
    <label for="id_session" class="control-label "> 
     Session 
    </label> 
    <div class="controls "> 
     <select class="select form-control" id="id_session" name="session"> 
      <option value="" selected="selected">---------</option> 
      <option value="1">Rocky Balboa Boxing Club</option> 
      <option value="2">All about the Box...ing</option> 
     </select> 
    </div> 
</div> 

<div id="div_id_rating" class="form-group"> 
    <label for="id_rating" class="control-label requiredField"> 
     Rating<span class="asteriskField">*</span> 
    </label> 
    <div class="controls "> 
     <select class="select form-control" id="id_rating" name="rating"> 
      <option value="0.0">0.0</option> 
      <option value="0.5">0.5</option> 
      <option value="1.0">1.0</option> 
      <option value="1.5">1.5</option> 
      <option value="2.0">2.0</option> 
      <option value="2.5" selected="selected">2.5</option> 
      <option value="3.0">3.0</option> 
      <option value="3.5">3.5</option> 
      <option value="4.0">4.0</option> 
      <option value="4.5">4.5</option> 
      <option value="5.0">5.0</option> 
     </select> 
    </div> 
</div> 

<div id="div_id_comments" class="form-group"> 
    <label for="id_comments" class="control-label requiredField"> 
        Comments<span class="asteriskField">*</span> 
    </label> 
    <div class="controls "> 
     <textarea class="textarea form-control" cols="40" id="id_comments" name="comments" rows="10"></textarea> 
    </div> 
</div> 

<div class="form-group"> 
    <div id="div_id_would_recommend" class="checkbox"> 
     <label for="id_would_recommend" class=""> 
      <input checked="checked" class="checkboxinput checkbox" id="id_would_recommend" name="would_recommend" type="checkbox"> 
      Would recommend 
     </label> 
    </div> 
</div> 

<div class="form-group"> 
    <div id="div_id_anonymous" class="checkbox"> 
     <label for="id_anonymous" class=""> 
      <input checked="checked" class="checkboxinput checkbox" id="id_anonymous" name="anonymous" type="checkbox"> 
      Anonymous 
     </label> 
    </div> 
</div> 

<div class="form-actions"> 
    <input type="submit" name="submit" value="Send Review" class="btn btn-primary" id="submit-id-submit"> 
</div> 

</form> 

Вот мой Javascript на дне:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#id_create_review').submit(function() { // catch the form's submit event 
     console.log('Yeah, no?'); 
     $.ajax({ // create an AJAX call... 
      data: $(this).serialize(), // get the form data 
      type: $(this).attr('method'), // GET or POST 
      url: $(this).attr('action'), // the file to call 
      success: function(response) { // on success.. 
       $('#success_div').html(response); // update the DIV 
      }, 
      error: function(e, x, r) { // on error.. 
       $('#error_div').html(e); // update the DIV 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

EDIT

Так что же происходит, что я получаю 403 ошибки из-за CSRF защита не работает. У меня есть javascript, который должен предотвращать эту ошибку 403, если запрос был сделан с помощью ajax, я также не вижу «Да, нет»? зашел на консоль, поэтому я решил, что форма должна быть отправлена ​​через стандартный Http.

Возможно, моя проблема в том, что форма обрабатывается javascript, но что запрос ajax все еще вызывает ошибку 403? Но почему бы мне не увидеть консольный журнал в моем JS?

И если проблема в том, что мой запрос ajax вызывает ошибку 403, почему мой код защиты не работает для отправки токена csrf? Я не могу сказать, что я на 100% понимаю все это ... Я в основном схватил его из онлайн-учебника по обработке аякс-запросов с помощью django. Вот код:

<script> 
function getCookie(name) { 
    var cookieValue = null; 
    if (document.cookie && document.cookie != '') { 
     var cookies = document.cookie.split(';'); 
     for (var i = 0; i < cookies.length; i++) { 
      var cookie = jQuery.trim(cookies[i]); 
      // Does this cookie string begin with the name we want? 
      if (cookie.substring(0, name.length + 1) == (name + '=')) { 
       cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
       break; 
      } 
     } 
    } 
    return cookieValue; 
} 
var csrftoken = getCookie('csrftoken'); 

/* 
The functions below will create a header with csrftoken 
*/ 

function csrfSafeMethod(method) { 
    // these HTTP methods do not require CSRF protection 
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
} 
function sameOrigin(url) { 
    // test that a given url is a same-origin URL 
    // url could be relative or scheme relative or absolute 
    var host = document.location.host; // host + port 
    var protocol = document.location.protocol; 
    var sr_origin = '//' + host; 
    var origin = protocol + sr_origin; 
    // Allow absolute or scheme relative URLs to same origin 
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || 
     (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || 
     // or any other URL that isn't scheme relative or absolute i.e relative. 
     !(/^(\/\/|http:|https:).*/.test(url)); 
} 

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) { 
      // Send the token to same-origin, relative URLs only. 
      // Send the token only if the method warrants CSRF protection 
      // Using the CSRFToken value acquired earlier 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
}); 
</script> 

Answer 1

Спасибо всем, кто предложил решения. Я закончил решение проблемы, переместив мой скрипт внутри включенного шаблона django, в котором была форма.

У меня есть основной шаблон django, который включает в себя меньший шаблон django с использованием тега {% include%}, а форма в этом включенном шаблоне. Первоначально у меня был javascript, чтобы поймать представление формы внизу основного шаблона. Я полагал, что это будет хорошо, потому что все шаблоны будут переданы в один большой HTML-файл в любом случае, поэтому на самом деле не будет иметь никакого значения, какой код был в каком шаблоне, но, видимо, он это сделал ... Как только я переместил свой скрипт в мой маленький, включенный шаблон проблема исчезла. Не знаю, почему это происходит.

Answer 2

дать этому попытку:

$(document).ready(function() { 
    $('#id_create_review').submit(function() { // catch the form's submit event 
     console.log('Yeah, no?'); 
     console.log($(this).serialize()); 
     var postdata = $(this).serializeArray(); 
     var url = $(this).attr('action'); 
     $.post(url , postdata, function(){ 
      // 
     }) 
     return false; 
    }); 
}); 

Answer 3

Попробуйте создать скрытое поле ввода и положить в его значение в csrftoken ... что-то вроде этого:

<input type="hidden" value="{% csrf_token %}"> 

Этого должно быть достаточно, если ваша ошибка вызвана защитой csrf.

Answer 4

Джанго Docs on include template tags

включаемой тег следует рассматривать как реализацию «делают это subtemplate и включают в себя HTML», а не «разобрать этот subtemplate и включить его содержимое, как если бы оно было частью родитель». Это означает, что между включенными шаблонами не существует общего состояния - каждый из них является полностью независимым процессом рендеринга.

Вот почему вам пришлось переместить сценарий. Раньше я не знал об этом.