@Nikita1244
Anonymous

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

Здравствуйте! Пишу приложение, не могу понять, как сделать отправку форм на ванильном 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?
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
yarkov
@yarkov Куратор тега JavaScript
Помог ответ? Отметь решением.
Гугл -> fetch FormData
Ну или покажите свои попытки, а тут подскажут где ошибка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
s3ttlezy
@s3ttlezy
micro frontender
Не совсем понял твою задумку, но могу предложить это реализовать через 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
      }
    }
  })
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы