jQuery 是一种流行的 JavaScript 库，可以简化前端开发过程。其中一个常见用法是使用 jQuery 来提交表单并将结果显示在页面上的某个 div 元素中。本文将介绍如何使用 jQuery 来实现这个功能。
HTML 表单
首先，我们需要编写一个 HTML 表单，代码如下：
----- ------------ ------ ---------------------- ------ ----------- --------- -------------------- ------ ------------------------- ------ ------------ ---------- --------------------- ------- ------------------------- ------- ---- ------------------
这里我们创建了一个包含名称和电子邮件字段的表单，并在最后添加了一个提交按钮。我们还为结果指定了一个空 div 元素，该元素的 ID 为“result”。
jQuery 代码
接下来，我们需要编写 jQuery 代码来处理表单的提交事件以及显示结果。代码如下：
---------------------------- -
----------------------------------- -
----------------------- -- ---------
--- -------- - -------------------- -- ------
-------------------- --------- ------------------ -
---------------------------- -- --------- --- -
---
---
---在这段代码中，我们首先在文档准备好后（即 DOM 加载完成后）添加了一个事件监听器，用于处理表单的提交事件。当表单被提交时，我们使用 event.preventDefault() 来阻止表单的默认行为，这样页面就不会刷新。
接下来，我们使用 jQuery 的 serialize() 方法来获取表单数据，并将其打包成一个字符串以便发送到服务器。这个字符串的格式是键值对，例如“name=John&email=john@example.com”。
然后，我们使用 $.post() 方法来向服务器发送 POST 请求。该方法接受三个参数：请求的 URL、要发送的数据和回调函数。当服务器返回响应时，回调函数会被执行。在这里，我们只需要将响应数据放入结果 div 中即可，使用 jQuery 的 html() 方法实现。
PHP 代码
最后，我们还需要编写服务器端的代码来处理本例中的 POST 请求。在这里，我们假设服务器端使用 PHP，代码如下：
----- ----- - --------------- ------ - ---------------- ---- ----- - ----- - ------- ---- ------- - ------- --
这段代码简单地获取表单中提交的两个字段（姓名和电子邮件），然后将它们打印到屏幕上。输出的格式与 HTML 一样，其中姓名和电子邮件之间用一个换行符分隔。
指导意义
通过以上的示例，我们学习了如何使用 jQuery 提交表单并将结果显示在页面上的某个 div 元素中。这种技术可以用于许多不同的场景，例如登录表单、注册表单、搜索表单等等。如果您正在开发一个需要用户输入数据并从服务器获取反馈的应用程序或网站，那么这种技术可能非常有用。
此外，学习如何编写服务器端代码来处理表单提交也是非常有帮助的。本例中我们使用了 PHP，但其他语言也可以实现相同的功能。
最后，我们也应该意识到安全性问题。在实际生产环境中，应该对表单数据进行验证，同时防止 SQL 注入、跨站点脚本攻击等安全威胁。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26553