HTML 表单是 Web 开发中最基本的组件之一，用于让用户输入数据并将其发送到服务器进行处理。通常当用户提交表单时，浏览器会将页面重定向到服务器返回的处理结果页面。但有时候我们希望在不重定向的情况下提交表单，例如在使用 AJAX 技术进行异步数据交互时。本文将介绍如何实现这种不重定向的表单提交。
使用 AJAX 进行表单提交
AJAX（Asynchronous JavaScript and XML）是一种常用的前端技术，可以通过 JavaScript 发送异步 HTTP 请求和接收响应。我们可以利用 AJAX 来提交表单数据并接收服务器返回的处理结果，而不需要页面重定向。
以下是使用 jQuery 实现 AJAX 表单提交的示例代码：
----- -------------
------ ----------- ----------------
------ --------------- ----------------
------- -------------------------
-------
------- -----------------------------------------------------------
--------
------------ -
------------------------------------ -
----------------------- -- -----------
--- -------- - -------------------- -- ------
--------
---- ------------- -- ---------
----- -------
----- ---------
-------- -------------- -
-- ------------
-
---
---
---
---------在这个示例中，我们使用 jQuery 的 submit 方法监听表单提交事件，并调用 event.preventDefault() 方法阻止默认的表单提交行为。然后通过 $(this).serialize() 方法获取表单数据并使用 $.ajax() 方法向服务器发送 POST 请求，并在成功返回时处理服务器返回的数据。
需要注意的是，在使用 AJAX 技术进行表单提交时，如果请求失败或返回错误信息，需要在 JavaScript 中进行错误处理并给出相应提示。
使用 Fetch API 进行表单提交
除了使用 jQuery 提供的 AJAX 方法，我们还可以使用原生的 Fetch API 进行表单提交。Fetch API 是现代浏览器提供的一种替代 XMLHttpRequest 的网络请求 API，具有更好的支持异步操作的能力。
以下是使用 Fetch API 实现 AJAX 表单提交的示例代码：
----- -------------
------ ----------- ----------------
------ --------------- ----------------
------- -------------------------
-------
--------
------------------------------------------------------------- --------------- -
-----------------------
--- -------- - --- --------------- -- ------
------------------- - -- ---------
------- -------
----- --------
--
------------------------ -
------ ---------------- -- ------
--
-------------------- -
-- ------------
--
---------------------- -
--------------------- -- ------
---
---
---------在这个示例中，我们使用原生的 addEventListener 方法监听表单提交事件，并调用 event.preventDefault() 方法阻止默认的表单提交行为。然后通过 new FormData(this) 方法获取表单数据并使用 fetch() 方法向服务器发送 POST 请求，并在成功返回时处理服务器返回的数据。
需要注意的是，在使用 Fetch API 进行表单提交时，还需要对响应数据进行解析，可以使用 response.text() 或 response.json() 方法将响应数据转换为文本或 JSON 格式。
总结
通过使用 AJAX 技术和 Fetch API，我们可以实现不重定向的 HTML 表单提交。在实际开发中，我们需要根据具体需求和场景选择合适的技术方案，并进行相应的错误处理和安全防范。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15316