作用: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. Java Inner Classes

    When thinking about inner classes in java, the first thing that comes to my mind is that, WHY do we ...

  2. .net微信公众号开发——模板消息

    作者:王先荣    本文介绍微信公众号中的模板消息,包括以下内容:(1)TemplateMessage类简介:(2)设置所属行业:(3)获得模板id:(4)发送模板消息:(5)接收推送模板消息发送结果 ...

  3. struts2:非表单标签

    非表单标签主要用于输出在Action中封装的信息,这在实际运用中是很常见的. 1. actionerror标签 <s:actionerror>标签主要用于输出错误信息到客户端,该标签将Ac ...

  4. hive报lzo Premature EOF from inputStream错误

    今天dw组同事发邮件说有一个问题让帮解决一下.他们自己没能搞得定.下面问题解决过程: 1.hql insert overwrite table mds_prod_silent_atten_user p ...

  5. 【转】如何判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  6. ORACLE查看并修改最大连接数

    http://blog.sina.com.cn/s/blog_4df2251d0100hkzv.html   第一步,在cmd命令行,输入sqlplus 第二步,根据提示输入用户名与密码 1. 查看p ...

  7. JavaScript ---属性

    获取属性 可以通过点(.)或方挂号([])运算符来获取属性的值. 对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于[]来说,方挂号内必须是一个计算结果为字符串的表达式. var aut ...

  8. 原生DOM探究 -- NodeList v.s. HTMLCollection

    涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集 ...

  9. .NET 相关工具

    加密工具,反DUMP,反调试,反编译,加密代码资源内容,混淆流程,变量.Confuser is a protector/obfuscator for .NET, providing great sec ...

  10. 安卓开发笔记——深入Activity

    在上一篇文章<安卓开发笔记——重识Activity >中,我们了解了Activity生命周期的执行顺序和一些基本的数据保存操作,但如果只知道这些是对于我们的开发需求来说是远远不够的,今天我 ...