通过阻止表单提交时的默认行为，可以在 JavaScript 中处理 HTML 表单。
然而，这样做我们也阻止了表单的提交，因此我们经常希望在脚本的后面提交它。
这可以通过调用表单上的提交方法来完成，也可以通过从 JavaScript 发送 AJAX 请求并在后台静默发送 HTTP POST 请求来完成，而无需更改网页 URL。

在许多情况下，允许正常提交表单（以防用户浏览器中禁用 JavaScript）和允许通过 JavaScript 提交表单可能是有意义的。

AJAX 代表异步 JavaScript 和 XML，传统上用于与 Web 服务器后端进行通信。
现在，它的使用更加宽松，因为我们还可以使用 JSON 和纯文本——实际上不需要 XML 部分。
尽管如此，使用诸如 JSON 之类的格式比发送普通的 POST 请求更容易，因为它避免了在发送 HTTP POST 请求之前手动从 JavaScript 对 POST 参数进行 url 编码的需要。

如前所述，我们可以使用 preventDefault 方法阻止表单提交，以下示例显示了一种简单的方法：

let exampleForm =  document.querySelector('#unique_id_of_form');
exampleForm.addEventListener('submit', event => {
  //Prevent the default behavior of the submit button
  event.preventDefault();
  //Handle the HTML form data here!
  let inputName = document.querySelector('#unique_id_of_form_input_field').value;
  //Test with console.log() or alert()
  console.log(inputName);
  //alert(inputName);
  //After handling the form data, submit the form.
  //If you need to validate the form data, this is a good place to do it!
  exampleForm.submit();
});

使用 JavaScript 提交 HTML 表单

我们可以使用 submit 方法提交 HTML 表单，也可以创建一个 HTTP POST 请求来静默提交表单。
后一个选项的优点是它允许我们根据服务器响应动态更新页面内容。

submit 方法不会调用表单上的提交事件，而是直接提交表单。

可以使用 submit 方法提交 HTML 表单：

function form_submit() {
  let exampleForm =  document.querySelector('#unique_id_of_form');
  exampleForm.submit();
}

发送带参数的 HTTP POST 请求

要从 JavaScript 发送 HTTP POST 请求，我们需要使用 XMLHttpRequest 对象。
我已经创建了一个 HTTP 客户端类来简化事情，所以我们只需要从中实例化一个新的 HTTP 客户端对象来发送一个 AJAX 请求。

由于我们发送的是异步请求，因此我们需要在“回调”函数中处理响应。
为简单起见，我将示例中的回调函数命名为“callback”，但我们可以随意命名。

下面的示例显示了如何使用前面提到的客户端类发送 HTTP POST 请求：

let postSTR = "name=Jacob&status=active";
let postData = encodeURI(postSTR);
httpClient = new http_client();
httpClient.post("https://onitroad.com/Examples/form-submission-tester.php", postData, callback);
function callback(response) {
  //Do stuff here
  //Test that we got a response from the server
  console.log(response);
  //alert(response);
}

要使用提交表单的结果更新页面，我们可以使用 innerHTML 访问页面上应该更新的元素：

function callback(response) {
  //Do stuff here
  document.querySelector("#unique_id_of_html_element").innerHTML = response;
}

上面脚本中的 postSTR 变量可以填充我们从 HTML 表单元素中获取的内容。
要获取表单数据，我们可以简单地使用 querySelector 并从相关输入元素的 value 属性中提取它。

每个 POST 参数都需要用与号 (&) 分隔，最后我们还在发送请求之前使用 encodeURI 对字符串进行 URI 编码。

如果我们正在处理 textarea ，则可以使用 innerHTML 来获取 textarea 元素的内容。