在 Web 开发中，经常需要将表单数据提交到服务器。通常情况下，我们会使用 form 元素的默认行为来实现这一点。但是，在某些情况下，可能需要更加灵活地控制表单的行为。例如，在一个页面中同时展示多个表单，并且需要将这些表单数据分别提交到不同的 URL 地址上，这时候就可以使用 iframe 元素来实现。
本文介绍如何使用 jQuery 在 HTML 表单中向 iframe 提交 POST 请求，以及如何获取 iframe 中返回的响应结果。同时，还会提供示例代码和详细讲解。
准备工作
在开始编写代码之前，需要确保必要的材料已准备好：
- 一个包含表单元素的 HTML 页面。
- 一个 iframe 元素，用于接收表单提交后的响应结果。
- jQuery 库文件。
表单提交
HTML 表单的提交有两种方式：GET 和 POST。其中，GET 方式会将表单数据以查询字符串的形式附加在 URL 后面发送给服务器；而 POST 方式则会将表单数据放在 HTTP 请求体中发送给服务器。由于 GET 方式存在 URL 长度限制和安全性问题，本文只介绍如何通过 POST 方式提交表单数据。
获取表单数据
在使用 jQuery 提交表单数据之前，需要先获取表单数据。可以使用 serialize() 方法将表单中的所有字段序列化为一个字符串，然后再将其作为 POST 请求体发送给服务器。示例代码如下：
var form = $('form');
var formData = form.serialize();提交表单数据
接下来，需要将表单数据通过 Ajax 方式提交到服务器上。在这里，我们使用 jQuery 的 ajax() 方法来实现。在 ajax() 方法中，可以指定请求方法、请求 URL、请求头和请求体等信息。示例代码如下：
-- -------------------- ---- -------
--------
----- -------
---- ----------------------------
----- ---------
-------- -------------- -
------------------------- - ------
--
------ ------------- ------- ------ -
------------------- - -------
-
---上述代码中，type 参数指定请求方法为 POST，url 参数指定请求 URL 地址，data 参数指定请求体为表单数据，在 success 回调函数中处理成功响应结果，在 error 回调函数中处理错误情况。
响应结果处理
在表单数据提交完成之后，服务器会返回一个响应结果。如果服务器返回的是 HTML 页面或 JSON 数据，可以直接显示或解析；但如果返回的是文件或其他二进制数据，则需要将其下载或使用特定方式打开。而在本文所介绍的场景中，服务器返回的是 HTML 页面，并且需要将其显示在 iframe 中。
获取响应结果
与提交表单数据类似，可以使用 jQuery 的 ajax() 方法来获取服务器返回的响应结果。需要注意的是，在 ajax() 方法中必须设置 dataType 参数为 html 或 text，以指定返回数据类型。示例代码如下：
-- -------------------- ---- -------
--------
----- -------
---- ----------------------------
----- ---------
--------- -------
-------- -------------- -
------------------------- - ------
--
------ ------------- ------- ------ -
------------------- - -------
-
---显示响应结果
获取到服务器返回的 HTML 页面后，需要将其显示在 iframe 中。可以通过 jQuery 的 attr() 方法来设置 iframe 的 src 属性，以实现页面加载和渲染。示例代码如下：
var iframe = $('#my-form-target');
iframe.attr('src', 'about:blank');
iframe.on('load', function() {
var doc = iframe.get(
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30641) ，转载请注明来源
[https://www.javascriptcn.com/post/30641](https://www.javascriptcn.com/post/30641)