什么是表单？
表单是HTML中的一种元素，用于收集用户输入的数据，表单通常包含一组输入字段(如文本框、密码框等),以及一个提交按钮，当用户填写完表单并点击提交按钮时，表单数据将被发送到服务器进行处理。
使用JavaScript提交Form表单的两种方法
1、使用submit()方法
submit()方法是HTML表单元素的一个内置方法，用于提交表单，当用户点击提交按钮时，浏览器会自动调用此方法，要使用submit()方法，只需在HTML中为表单元素添加onsubmit属性，并将其值设置为一个JavaScript函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用submit()方法提交表单</title>
</head>
<body>
<form action="your_server_url" method="post" onsubmit="return submitForm();">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>
<script>
function submitForm() {
var form = document.forms[0]; // 获取表单元素
var username = form.elements["username"].value; // 获取用户名输入框的值
var password = form.elements["password"].value; // 获取密码输入框的值
var data = "username=" + username + "&password=" + password; // 将用户名和密码拼接成字符串
// 将数据发送到服务器
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
// 如果请求成功，返回false阻止表单默认提交行为
if (xhr.status === 200) {
return false;
} else {
alert("提交失败，请重试！");
return false;
}
}
</script>
</body>
</html>
2、使用AJAX发送异步请求
AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术，通过使用AJAX,我们可以在不刷新页面的情况下向服务器发送请求，然后根据服务器返回的数据更新页面内容，这种方式可以提高用户体验，特别是在处理表单数据时。
要使用AJAX发送异步请求，我们需要创建一个XMLHttpRequest对象，设置其请求方法、URL和是否异步，然后为其添加事件监听器以处理请求状态变化，调用send()方法发送请求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用AJAX提交表单</title>
<script>
function submitForm() {
var form = document.forms[0]; // 获取表单元素
var username = form.elements["username"].value; // 获取用户名输入框的值
var password = form.elements["password"].value; // 获取密码输入框的值
var data = "username=" + username + "&password=" + password; // 将用户名和密码拼接成字符串
// 将数据发送到服务器
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("POST", form.action, true); // 设置请求方法、URL和是否异步(true表示异步)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头信息，告诉服务器我们发送的数据类型是表单编码格式的字符串(application/x-www-form-urlencoded)
xhr.onreadystatechange = function() { // 为XMLHttpRequest对象添加事件监听器，处理请求状态变化(readyState为4表示请求已完成)
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果请求已完成且状态码为200(表示请求成功)
var response = JSON.parse(xhr.responseText); // 将服务器返回的JSON字符串解析为JavaScript对象(这里假设服务器返回的是JSON格式的数据)
var result = response.result; // 从解析后的对象中获取result属性的值(这里假设result属性的值是我们关心的数据)
var message = response.message || "未知错误"; // 从解析后的对象中获取message属性的值(这里假设message属性的值是错误信息，如果没有message属性则使用默认值“未知错误”)
var output = document.getElementById("output"); // 根据ID获取页面中的输出元素(这里假设输出元素的ID是“output”)
output.innerHTML = "<p>结果：" + result + "</p><p>消息：" + message + "</p>"; // 将结果和消息显示在输出元素中(这里假设输出元素是一个无序列表)
} else if (xhr.readyState === XMLHttpRequest.DONE && xhr.status !== 200) { // 如果请求已完成但状态码不是200(表示请求失败)
var message = "提交失败，请重试！"; // 根据状态码设置错误信息(这里假设状态码不在200-299范围内时表示失败)
var output = document.getElementById("output"); // 根据ID获取页面中的输出元素(这里假设输出元素的ID是“output”)
output.innerHTML = "<p>消息：" + message + "</p>"; // 将错误信息显示在输出元素中(这里假设输出元素是一个段落元素)
} else if (xhr.readyState !== XMLHttpRequest.OPENED && xhr.readyState !== XMLHttpRequest.DONE) { // 如果请求尚未完成且状态不是OPENED或DONE(表示请求仍在进行中)
var message = "正在提交表单，请稍候！"; // 根据当前状态设置等待信息(这里假设其他任何状态下都表示正在提交表单)
