这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇浅谈 jquery.form.js 的 ajaxSubmit 和 ajaxForm 的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
• 依赖的脚本文件
- <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript">
- </script>
- <script src="../Javascript/jquery.form.js" type="text/javascript">
- </script>
• ajaxSubmit 和 ajaxForm 区别
ajaxForm
ajaxForm() 不能提交表单。在 document 的 ready 函数中,使用 ajaxForm 来为 AJAX 提交表单进行准备。提交动作必须由 submit 开始
ajaxForm() 适用于以表单提交方式处理 ajax 技术(需要提供表单的 action、id、 method,最好在表单中提供 submit 按钮)它大大简化了使用 ajax 技术提交表单时的数据传递问题,使用 ajaxForm() 你不需要逐个的以 Javascript 的方式获取每个表单属性的值,并且也不需要在请求路径后面通过 url 重写的方式传递数据。ajaxForm() 会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标 url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的 Javascript 代码
ajaxSubmit
ajaxSubmit() 马上由 AJAX 来提交表单。你可以在任何情况下进行该项提交。
ajaxSubmit() 适用于以事件的机制以 ajax 提交 form 表单(超链接、图片的 click 事件),该方法作用与 ajaxForm() 类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该 form 的 action 属性即可,不需要提供 submit 按钮。
• 示例代码
- <!--html-->
- <form id="form1" name="form1">
- <input id="userName" name="userName" value="姓名" />
- <input id="age" name="age" value="30" />
- <input type="submit" value="submit" />
- </form>
- <input id="myButton" type="button" value="提交" />
- <!--javascript-->
- <script type="text/javascript">
- var myData = {
- "CnName": "周佳良",
- "EnName": "zhoujl"
- };
- $(function() {
- var ajaxFormOption = {
- type: "post",
- //提交方式
- dataType: "json",
- //数据类型
- data: myData,
- //自定义数据参数,视情况添加
- url: "TestHandler.ashx?type=ajaxForm",
- //请求url
- success: function(data) { //提交成功的回调函数
- document.write("success");
- }
- };
- //form中有submit按钮——方式1
- $("#form1").ajaxForm(ajaxFormOption);
- //form中有submit按钮——方式2
- $("#form1").submit(function() {
- $(this).ajaxSubmit(ajaxFormOption);
- return false;
- });
- //不需要submit按钮,可以是任何元素的click事件
- $("#myButton").click(function() {
- $("#form1").ajaxSubmit(ajaxFormOption);
- return false;
- });
- });
- </script>
以上这篇浅谈 jquery.form.js 的 ajaxSubmit 和 ajaxForm 的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0504/331969.html