Django / vanilla javascript ajax публикует сообщения успешно, но страница все еще перезагружается

Question

Ajax, отправляющий форму, работает, но я не могу остановить перезагрузку страницы.

Я пробовал несколько вариантов прослушивания событий по id.В форме кнопка пыталась использовать inline onclick, onsubmit, пыталась поместить кнопку за пределы формы.

<form method="post" id="form1">
      {% csrf_token %}
      {{ form|crispy }}
      <button type="submit">Click</button>
    </form>

function parse_cookies() {
    var cookies = {};
    if (document.cookie && document.cookie !== '') {
        document.cookie.split(';').forEach(function (c) {
            var m = c.trim().match(/(\w+)=(.*)/);
            if(m !== undefined) {
                cookies[m[1]] = decodeURIComponent(m[2]);
            }
        });
    }
    return cookies;
}
var cookies = parse_cookies();

var title = document.getElementById('title_identifier');

function ajax_function() {
  var request = new XMLHttpRequest();
  request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
  request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
  var formElement = document.querySelector("#id_comment");
  request.send(new FormData(formElement));
}

form = document.getElementById('form1')
form.addEventListener('submit', ajax_function)

Если я изменю обработчик событий с формы на кнопку или наоборот, он успешно отправляет сообщение, отображаемое в инструментах разработчика Chrome: (1)

VM667 ajax_post_function.js:22 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".

Navigated to http://localhost:8000/ajax_post_function/WhateverTitle/

Но он снова возвращается к началу страницы.

Однако, если я использую эту функцию ajax, то комментарий не будет отправлен, и ответ от инструментов chrome dev будет:

function ajax_function(e) {
  var request = new XMLHttpRequest();
  request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
  request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
  var formElement = document.querySelector("#id_comment");
  request.send(new FormData(formElement));
  e.preventDefault();
}

ajax_post_function.js:34 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".

Если я использую:

return false;

в любой версии функции ajax_, форма отправляется успешно, но перезагружается снова и возвращается в начало страницы с сообщениемв chrome dev инструменты такие же, как в примере (1).

Я использовал shift + f5 между изменениями в качестве очистки кэша.Я бы предпочел не использовать jquery.

Функция просмотра, обслуживающая маршрут, длинная (иш), и я не уверен, что она уместна, поэтому я не разместил ее здесь.Ajax отправляет сообщения по тому же маршруту, на котором он находится.

Answer 1

Ты пробовал вот так?

$(document).ready(function(){
 $('#form1').on('submit',function(e) {
 e.preventDefault();
 var request = new XMLHttpRequest();
 request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
 request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
 var formElement = document.querySelector("#id_comment");
 request.send(new FormData(formElement));
 }
}