Как написать такой код на ванильном JS, AJAX?

Question

[Anonymous]

Здравствуйте! Пишу приложение, не могу понять, как сделать отправку форм на ванильном JS с AJAX. Нашел только этот код:

$("#idForm").submit(function(e) {

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

    var form = $(this);
    var actionUrl = form.attr('action');
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response.
        }
    });
    
});

Но, как известно - jQuery устарел. Какие есть варианты, чтобы код, который делает тоже самое, но только на ванильном JS c AJAX?

Comments

[Антон Литвиненко]

пишу себе на устаревшем джейквери и в ус не дую

[Anonymous]

Антон Литвиненко, это плохо :)

[Антон Литвиненко]

Никита Савченко, есть задачи и есть инструменты. Это не хорошо и не плохо. Точнее даже не так. Если инструмент решает задачу то это безусловно хорошо

Answer 1

[Алексей Ярков]

Гугл -> fetch FormData
Ну или покажите свои попытки, а тут подскажут где ошибка.

Comments

[Anonymous]

Попыток у меня нет, а вот Fetch я попробую.

[Anonymous]

Спасибо! Нашел сразу решение.

[Алексей Ярков]

Никита Савченко, та не за что ))

Answer 2

[Михаил Барзун]

Не совсем понял твою задумку, но могу предложить это реализовать через XHR, также возможно через fetch
Также не совсем понял смысл переменной actionUrl с один аттрибутом которая по-видимому просто получает аттрибут action у формы, и вставляет условно "GET" в параметр url куда надо отправлять запрос

document.querySelector("#idForm").addEventListener("submit", event => {
  event.preventDefault() // avoid to execute the actual submit of the form.

  const form = document.forms.idForm;
  const reqURL = "https://jsonplaceholder.typicode.com/users/1"
  const actionURL = form.getAttribute("action", )
  console.log(actionURL);

  return new Promise((resolve, reject) => {
    let ajax = new XMLHttpRequest()
    ajax.open(actionURL, reqURL)
    ajax.responseType = "json"
    const data = ajax.send(new FormData(form)) // serializes the form's elements.
    ajax.onload = () => {
      if (ajax.status >= 400) {
        reject(ajax.response)
      } else {
        resolve(alert(data)) // show response
      }
    }
  })
})