将数据从表单发送到另一个页面 - JavaScript

表单是Web页面中最常见的元素之一。当用户在表单中输入数据并提交时，我们需要将该数据发送到另一个页面或服务器，以便进一步处理。这种数据传输通常使用JavaScript实现。在本文中，我们将讨论如何使用JavaScript将数据从表单发送到另一个页面。

HTML表单

在讲到JavaScript之前，我们首先需要了解HTML表单的基本语法。HTML表单由一个form标签和一些input标签组成。下面是一个基本的HTML表单代码示例：

<form action="submit.html" method="post">
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <br>
  <label>
    Email:
    <input type="email" name="email">
  </label>
  <br>
  <input type="submit" value="Submit">
</form>

在上面的示例中，action属性指定了接收表单数据的页面，method属性指定了数据传输的方式（GET或POST）。input标签定义表单元素，例如文本字段、复选框、单选按钮等。

JavaScript发送表单数据

JavaScript允许我们使用XMLHttpRequest对象将表单数据发送到服务器。下面是一个基本的JavaScript代码示例：

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'submit.php');
  xhr.send(formData);
});

在上面的代码中，我们首先定义一个变量form，它包含HTML表单元素。然后，我们使用addEventListener方法监听submit事件，并调用preventDefault方法阻止表单提交默认的行为。

接下来，我们使用FormData对象获取表单数据。FormData对象提供了一种简单的方式来序列化表单数据。然后，我们使用XMLHttpRequest对象向指定的URL发送数据。

总结

在本文中，我们介绍了如何使用JavaScript将数据从表单发送到另一个页面。我们首先了解了HTML表单的基本语法，然后学习了使用JavaScript发送表单数据的基本代码示例。通过学习本文，您将能够更好地理解如何使用JavaScript在Web应用程序中处理表单数据。

代码片段

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'submit.php');
  xhr.send(formData);
});