欢迎进入Java社区论坛，与200万技术人员互动交流 >>进入
Ajax 表单提交是一个功能强大的技术，提供一种发送 web 表单的方法，无需重载浏览器窗口。jQuery 库让您使用 Ajax 表单提交功能进一步提供一个方便快捷的方法，以少量代码生成可用 Ajax 的 Web 表单。在本文中，学习如何使用 jQuery 创建基础 Ajax 表单提交，以及如何使用该技术验证一个用户。本文使用 jQuery 演示了 Ajax 用户注册技术，比如，检查用户名可用性，以及当选择的用户名已存在时提示用户名。既不需要表单提交也无需页面重载。如果您对 jQuery 不是很熟悉，它本质上是一个 JavaScript 库，使 JavaScript 开发变得很容易。它使所需的代码量最小化，因为它有许多内置功能，这样您就不再需要为这些功能编写客户端函数或对象了。
使用 jQuery 进行表单提交
无需重载即可提交一个表单在很多场景中都是很有用的。例如，有了它，您就可以在提交表单之前使用 JavaScript 代码验证表单字段，来在一个单页面应用程序中提交表单或者 - 如本文所示- 确定是否用户名已经注册过。使用 jQuery 触发一个表单提交有两种方法：使用 submit 处理函数或 click 处理函数。清单 1 显示了如何使用 submit 处理函数提交一个表单。
清单 1. 使用 jQuery 的 submit 处理函数提交表单
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$（document）。ready（function（） {
$（‘#submitForm’）。submit（function（e） {
alert（$（‘#sample’）。attr（‘value’））；
return e.preventDefault（）；
}）；
}）；
</script>
<form id=“submitForm” method=“post”>
<input type=“text” name=“sample” id=“sample” value=“Enter something” />
<input type=“submit” id=“submitBtn” value=“Submit” />
</form>
清单 2 展示如何使用 click 处理函数提交表单。
清单 2. 使用 jQuery 的 click 处理函数提交表单
<script type=“text/javascript”
src=“”></script>
<script type=“text/javascript”>
$（document）。ready（function（） {
$（‘#submitBtn’）。click（function（e） {
alert（$（‘#sample’）。attr（‘value’））；
return e.preventDefault（）；
}）；
}）；
</script>
<form id=“submitForm” method=“post”>
<input type=“text” name=“sample” id=“sample” value=“Enter something” />
<input type=“submit” id=“submitBtn” value=“Submit” />
</form>
这两个清单基本上是一样的：它们都是嵌入 jQuery 库的，在访问任何元素之前使用 ready 处理函数确认页面被加载，处理函数包括相同的代码。惟一的不同是处理函数和分配给处理函数的元素。submit 处理函数需要分配一个表单元素，而 click 处理函数，任何可点击的元素即可 - 本例中是 Submit 按钮。为了避免提交表单时刷新页面，您必须使用 preventDefault 函数。要访问 preventDefault 函数，您必须传递处理函数（即使作为一个参数）或者使用它访问该函数。
尽管以上两种选择都是有效的，但 submit 处理函数更为常用些。然而，有些情况下，您可能又不止一个 Submit 按钮，这就需要每个按钮一个 click 处理函数。清单 3 展示了这样一个必须使用 click 处理函数的场景，因为两个 Submit 按钮都能触发表单提交。
清单 3. 使用两个 submit 按钮提交表单
<script type=“text/javascript”
src=“”></script>
<script type=“text/javascript” src=“register.js”></script>
<div id=“container”>
<div id=“message”></div>
<form method=“post” id=“mainform”>
<label for=“username”>Username</label>
<input type=“text” name=“username” id=“username” value=“” />
<label for=“password”>Password</label>
<input type=“password” name=“password” value=“” />
<input type=“submit” name=“action” id=“login” value=“Log in” />
<h2>Extra options （registration only）</h2>
<label for=“firstname”>First name</label>
<input type=“text” name=“firstname” value=“” />
<label for=“lastname”>Last name</label>
<input type=“text” name=“lastname” value=“” />
<label for=“email”>Email</label>
<input type=“text” name=“email” value=“” />
<input type=“submit” name=“action” id=“register” 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 如何认证一个用户。
[1] [2] [3] [4] 下一页
相关文章
精彩导读
热门资讯
关注我们
