如何获取从表单快递发送的数据 - Javascript

当一个表单被提交时，我们可以通过Javascript获取它所发送的数据。这种方式被称为AJAX请求，它可以在不刷新页面的情况下向服务器发送数据并接收响应。

1. 监听表单提交事件

首先，我们需要在表单元素上添加一个onsubmit事件监听器，以便在表单提交时调用我们的JavaScript函数。

<form id="myForm" onsubmit="submitForm(event)">
  <!-- form elements -->
</form>

<script>
function submitForm(event) {
  event.preventDefault();
  // code to be executed when the form is submitted
}
</script>

2. 获取表单数据

在submitForm函数内部，我们可以使用FormData对象来收集表单的数据。FormData对象提供了一种方便的方式来构建表单数据的键/值对列表，我们可以将其发送给服务器。

function submitForm(event) {
  event.preventDefault();

  // get form data
  const formData = new FormData(event.target);

  // log form data to console
  for (const [key, value] of formData.entries()) {
    console.log(key + ': ' + value);
  }
}

在上面的代码中，我们首先创建了一个新的FormData对象，并将表单元素传递给它。然后，我们迭代FormData对象中的键/值对列表，并将日志输出到控制台。

3. 发送表单数据

现在我们已经收集了表单数据，我们可以通过AJAX请求将其发送给服务器。

function submitForm(event) {
  event.preventDefault();

  // get form data
  const formData = new FormData(event.target);

  // send data to server
  const xhr = new XMLHttpRequest();
  xhr.open('post', '/api/submit-form');
  xhr.send(formData);

  // handle response from server
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
}

在上面的代码中，我们创建了一个新的XMLHttpRequest对象，并使用open方法指定请求的方法（post）和URL（/api/submit-form）。我们然后使用send方法将FormData对象发送到服务器。

在我们收到服务器的响应时，我们使用onreadystatechange事件监听器来检查响应的状态码（200表示成功）并在控制台中记录响应的内容。（在实际的应用中，您可能希望采取其他措施，例如将响应反馈给用户或更新UI。）

结论

使用上述方法，我们可以轻松地从表单中收集数据并将其发送到服务器。请注意，我们使用的是原生JavaScript，而不是任何第三方库或框架。这使得我们的代码更轻量化、简洁和可维护。