如果您对 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 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="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 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="http://code.jquery.com/jquery.js"></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 被访问,用来确定这是一个用户登录还是一个新用户注册。

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部