Vanilla JavaScript AJAX 表单提交

Question

我需要帮助在 Vanilla JavaScript（无 jQuery）中使用 AJAX 提交表单。 我有这个 jQuery 代码，我需要将其转换为 JavaScript。

  $(document).ready(function() {
    $('.myForm').submit(function (event) {
      var data = $(this);
      $.ajax({
        type: data.attr('method'),
        url: data.attr('action'),
        data: data.serialize(),
        success: function (data) {

        }
      });
      event.preventDefault();
    });
  });

Answer 1

您可以使用内置的 Fetch API 进行 AJAX 调用，并使用 FormData 来解析您的表单。

除此之外，只需用事件侦听器、查询选择器和属性获取器替换 jquery。

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.myForm').addEventListener('submit', function (event) {
    var data = this;
    fetch(data.getAttribute('action'), {
      method: data.getAttribute('method'),
      body: new FormData(data)
    }).then(res=>res.text())
      .then(function (data) {
        
      });
    event.preventDefault();
  });
});

Answer 2

// Document loaded event listener
window.addEventListener('DOMContentLoaded', () => {

    // Get al forms with a specific CSS class
    var forms = document.querySelectorAll('.ajax-form');
    if (forms && forms.length) {
        forms.forEach(form => {

            form.addEventListener('submit', function(evt) {

                // Prevent form submission
                evt.preventDefault();           
                
                // Fetch data from {url}
                var xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
            
                xhr.addEventListener('readystatechange', function() {
                    if (this.readyState === 4) {
    
                        // Fetch and process data
                        var data = JSON.parse(this.responseText);
                        console.log(data);
                    }
                });
    
                // Get form data
                var data = new FormData(form),
                    method = form.getAttribute('method'),
                    url = form.getAttribute('action');
    
                // Debug
                console.log({
                    data: data,
                    method: method,
                    url: url
                });
            
                // Send a GET/POST/PUT/DELTE request
                xhr.open(method, url);
                xhr.send(data);
            })
        });
    }
});