【jQuery基础学习】07 jQuery表单插件-Form
作用: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的更多相关文章
- 表单插件——form
表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- jQuery 基础学习笔记总结(一)
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
- jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
随机推荐
- ecshop商品详细描述调用商品相册代码
该修改方法让用户体验更好,特别是ecshop建站的用户产品描叙文字不多的朋友,直接让相册图显示在产品描述里.免去除在后台添加了 <div style="text-align:cente ...
- 配置ST3在浏览器中打开
打开Preferences - 「Key Bindings - User」,添加此行: {"keys": ["f1"],"command": ...
- Unity数据存储路径总结
一.在项目根目录中创建Resources文件夹来保存文件.可以使用Resources.Load("文件名字,注:不包括文件后缀名");把文件夹中的对象加载出来.注:此方可实现对文件 ...
- 误删dpkg的/var/lib/dpkg/info文件夹的解决办法 zhuan
今天安装软件时时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1) 上网查解决方案,被网上误导,一不小心 ...
- winedt设置自动显示行号[latex]
options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...
- Unix sed实用教程开篇
已经看了一段时间的Linux Shell编程了,也能完成一些基本的使用,为了加深理解,恰好看到了The Unix School的一个sed&awk教程,不是简单的命令参数堆积,而是一个相当实用 ...
- ThoughtWorks 2016年第1期DNA活动总结
今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...
- VPN有什么用?(转载)
VPN有什么用?转载自:http://www.chinaz.com/web/2012/0320/240819.shtml 当你非常非常想访问一个国外的网站,而这个网站被防火墙屏蔽的时候,你应该怎么做呢 ...
- Java知多少(111)数据库之修改记录
修改数据表记录也有3种方案. 一.使用Statement对象 实现修改数据表记录的SQL语句的语法是: update表名 set 字段名1 = 字段值1,字段名2 = 字段值2,……where特 ...
- 自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
关于 MongoDB,下面来自百度百科: MongoDB[1]是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB[1] Mon ...