Vanilla JavaScript AJAX 表单提交

Question

我需要帮助在 Vanilla JavaScript 中使用 AJAX 提交表单（否 jQuery）。我有这个 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

您可以使用 built-in Fetch API for AJAX calls and 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();
  });
});

Vanilla JavaScript AJAX 表单提交

Vanilla JavaScript AJAX form submit

javascript

forms

ajax