如何从表单收集数据并通过ajax POST发送(从jQuery到Vanilla JS)

<form id="myForm">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // 阻止表单默认提交行为

      var formData = $(this).serialize(); // 序列化表单数据

      $.ajax({
        url: 'your-api-endpoint', // 替换为实际的API端点
        type: 'POST',
        data: formData,
        success: function(response) {
          // 处理成功响应
        },
        error: function(error) {
          // 处理错误响应
        }
      });
    });
  });
</script>

<form id="myForm">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var formData = new FormData(this); // 创建FormData对象

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-api-endpoint'); // 替换为实际的API端点
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 处理成功响应
      } else {
        // 处理错误响应
      }
    };
    xhr.send(formData);
  });
</script>