Как получить данные из шаблона по нажатию на кнопку без перезагрузки страницы?

Question

[NikClik]

Мне нужно отправить данные (которые помещены в input на шаблоне) в def по нажатию на кнопку, но при этом нельзя перезагружать страницу, т.е оформить передачу данных через form на шаблоне или через обращению к url при нажатии на кнопку нельзя т.к они перезагрузят страницу, тогда как это можно сделать не перезагружая страницу?

Answer 1

[Aleksey Solovyev]

Для формы submit Event.preventDefault();
После отправляем AJAX запрос:

// this is the id of the form
$("#idForm").submit(function(e) {


    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the django.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Plain JS: XMLHttpRequest

var http = new XMLHttpRequest();
http.open('POST', url, true);
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    }
}
http.send(params);

JQ Ajax

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Answer 2

[Socrates]

vue в связке если использовать удобно думаю очень

Comments

[sim3x]

вью новый джиквери уже?

[Socrates]

sim3x, я джквери не использовал, хз. для дальнейших взаимодействий с интерфейсом vue не помешает

[sim3x]

Socrates,
Ради одной формы и одного запроса загружать либу
Именно так и использовали jq

[Андрей Шубин]

Так и в самом Vue нет ничего для выполнения запроса. Всё равно юзать xhr/fetch/ajax придеться. А с Django можно вернуть не JSON, а часть шаблона с формой, и даже с отрендеренными ошибками, если таковые будут, и вставить ответ куда нужно с помощью

document.getElementById('FormID').innerHTML = response.data;

В этом случае с Vue больше кода напишешь, ещё и либу тянуть. Vue хорош, но всему свои задачи.

[Socrates]

я упомянул vue не ради этой задачи именно, а вообще в связке для ui-dev