使用 JavaScript 提交 HTML 表单203

在网页开发中，表单用于收集用户输入，例如个人信息、订单详情或搜索查询。在 HTML 中，使用 <form> 元素创建表单，其中包含各种类型的输入元素，例如文本输入、单选按钮、复选框和下拉菜单。为了处理和发送表单数据，需要使用 JavaScript。

获取表单元素

要获取表单元素，可以使用以下方法：
(id)：根据其 ID 获取元素。
(name)：根据其 name 属性获取元素的集合。
：获取属于表单的所有元素的集合。

获取表单数据

获取表单数据后，可以将其发送到服务器处理。有两种主要方法可以获取表单数据：

1. 表单序列化

表单序列化将表单数据转换为一个查询字符串，其中每个字段名称与其值用等号分隔，并用与号 (&) 连接。可以使用 () 方法轻松执行表单序列化。
const formData = ("myForm").serialize();

2. FormData 对象

FormData 对象提供了一个更强大的方式来处理表单数据。它允许您访问上传的文件以及表单中的其他值。要使用 FormData，需要创建一个新的实例并为其添加表单数据。
const formData = new FormData(("myForm"));

发送表单数据

获取表单数据后，可以使用 XMLHttpRequest 对象将数据发送到服务器。XMLHttpRequest 对象允许您发送和接收 HTTP 请求。

使用表单序列化

const xhr = new XMLHttpRequest();
("POST", "");
("Content-Type", "application/x-www-form-urlencoded");
(formData);

使用 FormData 对象

const xhr = new XMLHttpRequest();
("POST", "");
(formData);

在发送请求后，可以在 onload 事件处理程序中处理服务器响应。

示例

以下是一个使用 JavaScript 提交 HTML 表单的完整示例：
<form id="myForm">
<input type="text" name="name">
<input type="email" name="email">
<input type="submit" value="Submit">
</form>
<script>
const form = ("myForm");
("submit", (e) => {
();
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
("POST", "");
(formData);
= () => {
// 处理服务器响应
};
});
</script>