当我们在网页上填写表单并提交时，通常会发生跳转到另一个页面的情况。但是有些时候，我们希望在提交表单后停留在当前页面，而不是跳转到其他页面。本文将介绍如何使用 JavaScript 和 AJAX 实现在不跳转页面的情况下提交表单。
使用 JavaScript 提交表单并停留在同一页面
首先，我们可以通过 JavaScript 来控制表单的提交行为。具体来说，我们可以使用 preventDefault() 方法来阻止默认的表单提交行为，并在此基础上实现自己的逻辑。以下是一个例子：
-- -------------------- ---- ------- ----- ------------- ---- ---- --- ------- ------------------------- ------- -------- ----- ------ - ----------------------------------- --------------------------------- ------- -- - ----------------------- -- ----------- -- --------------- --- ---------
在上面的例子中，我们通过给表单元素添加一个事件监听器来监控表单的提交行为。当用户点击提交按钮时，该事件监听器就会被触发。在监听器内部，我们调用了 preventDefault() 方法来阻止默认的表单提交行为，然后可以在此基础上实现自己的逻辑。
接下来，我们可以使用 AJAX 技术将表单数据提交到后台，并在提交成功后更新当前页面的内容。以下是一个示例代码：
-- -------------------- ---- -------
----- -------------
---- ---- ---
------- -------------------------
-------
--------
----- ------ - -----------------------------------
--------------------------------- ------- -- -
----------------------- -- -----------
----- -------- - --- -----------------
--------------------- -
------- -------
----- ---------
--
-------------- -- ----------------
---------- -- -
-- -------------
---
---
---------在上面的代码中，我们使用了 fetch() 方法来向服务器发送 POST 请求，并将表单数据作为请求体发送。在请求成功后，我们通过 then() 方法来接收响应并处理返回的数据。如果服务器返回的数据是 JSON 格式的，我们还需要调用 response.json() 方法来解析响应数据。
总结
本文介绍了如何使用 JavaScript 和 AJAX 实现在不跳转页面的情况下提交表单。虽然这种技术相对简单，但它可以帮助我们更好地掌控用户体验，提高网站的交互性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26392