作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新。

它的核心方法是ajaxForm()和ajaxSubmit()

升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可:

  //就是下面这么简单
$("#myForm").ajaxForm(function(){
//提交成功后的操作
});
//你也可以这样
$("#myform").submit(function(){
$(this).ajaxSubmit(function(){
//提交成功后的操作
});
return false;//阻止表单默认提交
});

提交表单的时候不仅可以像上面的例子那样,给ajaxForm和ajaxSubmit传递一个回调函数,还可以传递一个options对象。

定义了一个options如下:

var options={
target:"#output1",//把服务器返回的内容放入id为output1的元素中
beforeSubmit:function(formData,jqForm,options){//提交前的回调函数
//formData为数组对象,即提交的数据
//jqForm是一个jQuery对象,封装了表单元素
//options就是options对象
//在这个回调函数里,返回false会阻止表单提交
}
success:function(responseText,statusText,xhr,$form){//提交后的回调函数
//statusText是返回状态,值为success和error等
//responseText携带服务器返回的的数据内容。
//会根据datatype的类型来返回相应格式的内容
//对于缺省值:返回的是XMLHttpRequest对象的responseXML属性
},
url:url, //默认为form的action,如果申明,就用url
type:type, //默认为form的method(post或get),如果申明,就覆盖
dataType:null, //服务端返回的类型
clearForm:true, //成功提交后,清除所有表单元素的值
resetForm:true, //成功提交后,重置所有表单元素的值
timeout: //限制请求的超时时间,大于3秒,跳出请求
}
$("myForm").ajaxForm(options);

【jQuery基础学习】07 jQuery表单插件-Form的更多相关文章

  1. 表单插件——form

    表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...

  2. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  3. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  4. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

  6. jQuery基础学习4——jQuery容错性

    使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...

  7. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  8. jQuery 基础学习笔记总结(一)

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  9. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

随机推荐

  1. ecshop商品详细描述调用商品相册代码

    该修改方法让用户体验更好,特别是ecshop建站的用户产品描叙文字不多的朋友,直接让相册图显示在产品描述里.免去除在后台添加了 <div style="text-align:cente ...

  2. 配置ST3在浏览器中打开

    打开Preferences - 「Key Bindings - User」,添加此行: {"keys": ["f1"],"command": ...

  3. Unity数据存储路径总结

    一.在项目根目录中创建Resources文件夹来保存文件.可以使用Resources.Load("文件名字,注:不包括文件后缀名");把文件夹中的对象加载出来.注:此方可实现对文件 ...

  4. 误删dpkg的/var/lib/dpkg/info文件夹的解决办法 zhuan

         今天安装软件时时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1)   上网查解决方案,被网上误导,一不小心 ...

  5. winedt设置自动显示行号[latex]

    options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...

  6. Unix sed实用教程开篇

    已经看了一段时间的Linux Shell编程了,也能完成一些基本的使用,为了加深理解,恰好看到了The Unix School的一个sed&awk教程,不是简单的命令参数堆积,而是一个相当实用 ...

  7. ThoughtWorks 2016年第1期DNA活动总结

    今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...

  8. VPN有什么用?(转载)

    VPN有什么用?转载自:http://www.chinaz.com/web/2012/0320/240819.shtml 当你非常非常想访问一个国外的网站,而这个网站被防火墙屏蔽的时候,你应该怎么做呢 ...

  9. Java知多少(111)数据库之修改记录

    修改数据表记录也有3种方案. 一.使用Statement对象 实现修改数据表记录的SQL语句的语法是:    update表名 set 字段名1 = 字段值1,字段名2 = 字段值2,……where特 ...

  10. 自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试

    关于 MongoDB,下面来自百度百科: MongoDB[1]是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.   mongoDB[1] Mon ...