前言
在前端开发中，表单是必不可少的组件之一。表单可以收集用户输入的数据，然后将这些数据提交给服务器进行处理。本文将介绍如何使用 jQuery 捕获表单数据，并将其提交到服务器。
捕获表单数据
首先，我们需要通过 jQuery 选择器获取表单元素。例如，假设我们有一个表单，其中包含 name 和 email 字段：
-- -------------------- ---- ------- ----- ------------ ------ ------------------------ ------ ----------- -------------- ------ -------------------------- ------ ------------ --------------- ------- ----------------------------- -------
我们可以使用以下代码获取表单元素：
var formData = $('#myForm').serializeArray();serializeArray() 方法将表单元素的名称和值转换为对象数组。对于上面的示例表单，formData 将如下所示：
[
{ "name": "name", "value": "John Doe" },
{ "name": "email", "value": "john@example.com" }
]如果你需要将表单数据转换为字符串，可以使用 serialize() 方法：
var formDataStr = $('#myForm').serialize();serialize() 方法将表单元素的名称和值转换为 URL 编码字符串。对于上面的示例表单，formDataStr 将如下所示：
name=John+Doe&email=john%40example.com
提交表单数据
一旦我们捕获了表单数据，就可以将其提交给服务器。通常，我们使用 AJAX（异步 JavaScript 和 XML）来完成这项任务。以下代码演示了如何使用 jQuery 发送 AJAX 请求：
-- -------------------- ---- -------
--------
---- ---------------
----- -------
----- ---------
-------- ------------------ -
----------------- --------- ---------------
--
------ ------------- ------- ------ -
------------------- ---------- ---------
-
---在上面的示例中，我们使用 $.ajax() 方法发送一个 POST 请求到 /submit-form URL。data 参数包含我们从表单中获取的数据，success 回调函数在请求成功时被调用，error 回调函数在请求失败时被调用。
示例代码
下面是完整的示例代码，演示了如何捕获表单数据并将其提交到服务器：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- ----- --------------
------- -----------------------------------------------------------
-------
------
----- ------------
------ ------------------------
------ ----------- --------------
------ --------------------------
------ ------------ ---------------
------- -----------------------------
-------
--------
---------------------------- -
------------------------------- -
------------------- -- --------
--- -------- - -------------------------
--------
---- ---------------
----- -------
----- ---------
-------- ------------------ -
----------------- --------- ---------------
--
------ ------------- ------- ------ -
------------------- ---------- ---------
-
---
---
---
---------
-------
-------在上面的示例中，我们使用 $(document).ready() 函数来确保文档加载完成后再执行代码。然后，我们使用 $('#myForm').submit() 函数来捕获表单提交事件。在该函数中，我们使用 e.preventDefault() 方法防止表单自动提交。最后，我们使用 AJAX 发送表单数据到服务器。
结论
通过本文的学习，你应该了解如何使用 jQuery 捕
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24133