香草 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();
  });
});