在前端开发中，表单是一个非常重要的元素。用户通过表单来与应用程序进行交互，例如填写个人信息、提交订单或搜索内容等。但是，在某些情况下，当用户在表单中输入数据时，可能不希望页面重新加载或跳转到新的页面。本篇文章将讨论如何使用现代前端技术，实现表单不需要操作就可以收集用户输入，并且不会导致页面的重新加载。
前端表单基础
在HTML中，表单被定义为一组包含表单控件的元素，包括文本框、单选框、复选框和下拉列表等。当用户点击“提交”按钮时，浏览器会将所有表单数据作为HTTP请求的一部分发送给服务器。服务器可以使用这些数据来执行适当的处理并返回响应。
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" name="name" id="name"><br><br> <label for="email">Email:</label> <input type="email" name="email" id="email"><br><br> <input type="submit" value="Submit"> </form>
在上面的示例中，我们创建了一个简单的表单，其中包含两个文本框和一个提交按钮。当用户点击提交按钮时，浏览器将向服务器发送一个HTTP POST请求，以此提交表单数据。
无刷新表单提交
在某些情况下，例如Ajax应用程序或单页应用程序，我们可能需要在不重新加载整个页面的情况下收集表单数据。幸运的是，现代浏览器为我们提供了一种名为XMLHttpRequest（XHR）的API，它可以让我们通过JavaScript将表单数据异步地发送给服务器，并接收响应。
-- -------------------- ---- -------
----- -------------
------ ------------------------
------ ----------- ----------- ------------------
------ --------------------------
------ ------------ ------------ -------------------
------- -----------------------------
-------
--------
----- ---- - -----------------------------------
------------------------------- ----- ------- -- -
-----------------------
----- -------- - --- ---------------
----- -------- - ----- ---------------- -
------- -------
----- ---------
---
----- ---- - ----- ----------------
------------------
---
---------在上面的代码中，我们使用了事件监听器来捕获表单提交事件。然后，我们调用preventDefault()方法来阻止默认行为（即页面刷新）。接下来，我们创建了一个FormData对象，它可以从表单中收集所有输入字段的值。最后，我们使用fetch API将FormData对象作为请求正文发送到服务器，并使用JSON格式解析响应。
使用jQuery实现无刷新表单提交
除了原生JavaScript之外，jQuery也提供了方便的方法来处理无刷新表单提交。
-- -------------------- ---- -------
----- -------------
------ ------------------------
------ ----------- ----------- ------------------
------ --------------------------
------ ------------ ------------ -------------------
------- -----------------------------
-------
------- -----------------------------------------------------------
--------
------------------------------------ -
-----------------------
--------
---- ----------
------- -------
----- --------------------
-------- -------------- -
------------------
-
---
---
---------在上面的代码中，我们使用jQuery的submit()方法来捕获表单提交事件。然后，我们使用$.ajax()方法
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12327