Ajax 表单提交是一个功能强大的技术，提供一种发送 web 表单的方法，无需重载浏览器窗口。jQuery 库让您使用 Ajax 表单提交功能进一步提供一个方便快捷的方法，以少量代码生成可用 Ajax 的 Web 表单。在本文中，学习如何使用 jQuery 创建基础 Ajax 表单提交，以及如何使用该技术验证一个用户。本文使用 jQuery 演示了 Ajax 用户注册技术，比如，检查用户名可用性，以及当选择的用户名已存在时提示用户名。既不需要表单提交也无需页面重载。
如果您对 jQuery 不是很熟悉，它本质上是一个 JavaScript 库，使 JavaScript 开发变得很容易。它使所需的代码量最小化，因为它有许多内置功能，这样您就不再需要为这些功能编写客户端函数或对象了。更多信息和下载 jQuery 库的链接，见 ；或者，如您在所有代码样例中看到的那样，可以直接嵌入 jQuery 库的当前版本。
使用 jQuery 进行表单提交无需重载即可提交一个表单在很多场景中都是很有用的。例如，有了它，您就可以在提交表单之前使用 JavaScript 代码验证表单字段，来在一个单页面应用程序中提交表单或者 — 如本文所示— 确定是否用户名已经注册过。使用 jQuery 触发一个表单提交有两种方法：使用 submit 处理函数或 click 处理函数。清单 1 显示了如何使用 submit 处理函数提交一个表单。
清单 1. 使用 jQuery 的 submit 处理函数提交表单<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submitForm').submit(function(e) { alert($('#sample').attr('value')); return e.preventDefault(); }); }); </script> <form method="post"> <input type="text" value="Enter something" /> <input type="submit" value="Submit" /> </form>
清单 2 展示如何使用 click 处理函数提交表单。
清单 2. 使用 jQuery 的 click 处理函数提交表单<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submitBtn').click(function(e) { alert($('#sample').attr('value')); return e.preventDefault(); }); }); </script> <form method="post"> <input type="text" value="Enter something" /> <input type="submit" value="Submit" /> </form>
这两个清单基本上是一样的：它们都是嵌入 jQuery 库的，在访问任何元素之前使用 ready 处理函数确认页面被加载，处理函数包括相同的代码。惟一的不同是处理函数和分配给处理函数的元素。submit 处理函数需要分配一个表单元素，而 click 处理函数，任何可点击的元素即可 — 本例中是 Submit 按钮。为了避免提交表单时刷新页面，您必须使用 preventDefault 函数。要访问 preventDefault 函数，您必须传递处理函数（即使作为一个参数）或者使用它访问该函数。
尽管以上两种选择都是有效的，但 submit 处理函数更为常用些。然而，有些情况下，您可能又不止一个 Submit 按钮，这就需要每个按钮一个 click 处理函数。清单 3 展示了这样一个必须使用 click 处理函数的场景，因为两个 Submit 按钮都能触发表单提交。
清单 3. 使用两个 submit 按钮提交表单<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="register.js"></script> <div> <div></div> <form method="post"> <label for="username">Username</label> <input type="text" value="" /> <label for="password">Password</label> <input type="password" value="" /> <input type="submit" value="Log in" /> <h2>Extra options (registration only)</h2> <label for="firstname">First name</label> <input type="text" value="" /> <label for="lastname">Last name</label> <input type="text" value="" /> <label for="email">Email</label> <input type="text" value="" /> <input type="submit" value="Register" /> </form> </div>
注意，在本例中这个表单可以执行多个活动：现有用户可以登录，新用户可以通过输入附加账户信息进行注册。使用表单上的 submit 处理函数在这种场景中不能运行，因为它不能确定哪个按钮触发表单提交。因此，清单 4 使用 click 处理函数来确定每个按钮采取什么行动，便于您以后依此处理数据。
清单 4. register.js 中提交按钮的 Click 处理函数$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; return e.preventDefault(); }); });
文档准备好后，您需要为 Register 和 Login 按钮分配 click 处理函数。click 处理函数接收一个参数，命名为 e（作为事件） 。此事件对象稍后用来预防默认表单提交。正如之前代码所述。当 click 处理函数被调用时，当前被点击的对象的 ID 被访问，用来确定这是一个用户登录还是一个新用户注册。
现在，您已经知道了使用 jQuery 如何提交表单，我们来看看使用 jQuery 中的 Ajax 和 PHP 如何认证一个用户。
使用 jQuery 中的 Ajax 功能注册和认证一个用户要认证和注册一个用户，您需要一个服务器端语言和一个数据库。在本文中，服务器端语言是 PHP，数据库是 MySQL，您不需要使用任何特定的服务器端语言或者数据库来创建此函数。
首先开始在 JavaScript 文件中编写附加代码，使用 Ajax 将表单发送给 PHP 。清单 5 的代码开始也类似于清单 4 ，因为它包含按钮的 ready 处理函数和 click 处理函数，而且它确定点击哪个按钮。然后，如果消息元素是打开的，您需要使用 slideUp 函数关闭它的。咋一看 Ajax 调用不是很明显，特别是如果您过去通常不 使用 jQuery 创建 Ajax，因为您通常使用简写函数来发送调用，在代码中甚至都没提及 Ajax。
清单 5. 使用 jQuery 中的 Ajax 提交一个 web 表单
相关文章
![[jQuery][轉] jQuery對select tag的操作 @ 碎碎念 :: 隨意窩 Xui](/images/defaultpic.gif)
精彩导读
热门资讯
关注我们
