如何让网站向您发送表单 - Javascript

当在网站上填写表单时，有时候需要把表单数据发送到后端服务器上。Javascript 是一种非常流行的编程语言，可以帮助我们实现这一目标。

1. 使用 HTML 表单元素

最常见的处理表单数据的方式是使用 HTML 表单元素。在 HTML 中，可以使用 form 元素来创建表单，使用 input 元素来创建表单字段。每个表单字段都有一个 name 属性，它用于在提交表单时标识该字段。

<form action="submit-form.php" method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
  <input type="submit" value="Submit">
</form>

在此例中，我们创建了一个 HTML 表单，它有两个文本字段：name 和 email。表单的 action 属性指定表单数据将被发送到的服务器资源的 URL。表单还有一个 method 属性，用于指定要使用的 HTTP 请求方法（POST 或 GET）。

submit 按钮用于提交表单。当表单被提交时，浏览器会将表单数据打包成一个 HTTP 请求，并将其发送到服务器资源的 URL 部分。

2. 使用 XMLHttpRequest 对象

如果您想使用 Javascript 创建自己的表单处理逻辑，可以使用 XMLHttpRequest（XHR）对象来发送表单数据。XHR 是 Javascript 内置的对象，它允许您发送 HTTP 请求和接收 HTTP 响应。

要使用 XHR 对象发送表单数据，请使用以下代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'submit-form.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert('form data submitted successfully');
  }
}
const formData = new FormData();
formData.append('name', document.getElementById('name').value);
formData.append('email', document.getElementById('email').value);
xhr.send(formData);

在这个例子中，我们创建了一个新的 XHR 对象并打开了一个 POST 请求。注意请求的第二个参数：我们将表单数据发送到 submit-form.php。由于我们正在发送表单数据，因此我们需要将 “Content-Type” 标头设置为 application/x-www-form-urlencoded。

XHR 对象的 onreadystatechange 事件处理函数在每次状态变化时被调用。在这个例子中，当 readyState 是 4（即请求完成），并且 status 是200（即成功完成请求）时，我们将显示一个警报消息。

最后，我们创建了一个新的 FormData 对象，将 name 和 email 表单字段的值附加到它上面，并使用 xhr.send() 发送表单数据。

3. 使用第三方库

在实际开发过程中，使用现成的第三方库可以大大简化表单数据的发送过程。以下是一些流行的表单处理库：

• jQuery Form Plugin
• Axios
• Fetch API

这些库中的每一个都提供了方便的 API，可用于将表单数据发送到后端服务器。

结论

在本文中，我们介绍了三种常用的发送表单数据的方式：使用HTML表单元素、使用XMLHttpRequest对象和使用第三方库。对于不同的场景和开发者，选择不同的方式来实现这个目标。