Мое представление Django не отправляет ответ на AJAX

У меня есть сценарий ajax, используемый для выполнения POST-запроса на странице.

function update_button() {
    console.log(mediaArray)
    alert(mediaArray)
    $.ajaxSetup({
          headers: {
            "X-CSRFToken": getCookie("csrftoken")
          },
        });
    $.ajax({
        type:"POST",
        url: "{% url 'ajaxres' %}",
        data: {"image":String(mediaArray)},
        dataType: 'json',
        success: function (data) {
            alert(data)
            // do something with response
            window.location.replace("{% url 'posts' %}")
         },
    },
    );
}

Который успешно отправляет свои данные, но перезагружая страницу и в представлениях, я отправляю ответ JSON обратно в ajax:

return JsonResponse('Done!', safe=False)

Но функция успеха не работает

Проблема заключается в том, что вам нужно предотвратить наступление стандартного события submit, когда form происходит submit.

Для этого вам необходимо удалить обработчик события onsubmit из вашего HTML (также обратите внимание, что все атрибуты onX теперь являются плохой практикой и их следует избегать по мере возможности). Вместо этого вы должны использовать ненавязчивый обработчик событий, который принимает событие в качестве аргумента, чтобы вы могли взаимодействовать с ним по мере необходимости.

Смотрите пример ниже, как это сделать в вашем случае:

<form action="" id="your-form">
  {% csrf_token %}
  <div class="row" style="background-color: white">
    {{form.edit_uname}}
  </div><br />
  <input type="submit" class="btn btn-secondary center">
  <br /><br />
</form>

document.querySelector('#your-form').addEventListener('submit', e => {
  e.preventdefault();

  $.ajaxSetup({
    headers: {
      "X-CSRFToken": getCookie("csrftoken")
    },
  });
  $.ajax({
    type: "POST",
    url: "{% url 'ajaxres' %}",
    data: {
      "image": String(mediaArray)
    },
    dataType: 'json',
    success: function(data) {
      alert(data)
      // do something with response
      window.location.replace("{% url 'posts' %}")
    },
  });
});
Вернуться на верх