query插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾。
其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行。比如:
$(function(){
$('#myForm').submit(function(){
$.ajax({
url:"/WebTest/test/testJson.do",
data:$('#myForm').serialize(),
dataType:"json",
error:function(data){
alert(data);
},
success:function(data){
alert(data);
}
});
});
})
这样的方式掩盖了form的功能,使它成为了变相的ajax。下面来看看符合form思想的ajaxForm。
ajaxForm:
先下载:http://files.cnblogs.com/china-li/jquery.form.js
两个主要的API:ajaxForm() ajaxSubmit()。
ajaxForm()配置完之后,并不是马上的提交,而是要等submit()事件,它只是一个准备。一般用法:
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback // other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example:
//timeout: 3000
}; // bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options).submit(function(){return false;});
});
这个是官方的例子,不过他没有最后的提交。提交中返回false,阻止它的默认提交动作,而是用ajax交互。
其中options的属性,重要的解释一下:
target 返回的结果将放到这个target下
url 如果定义了,将覆盖原form的action
type get和post两种方式
dataType 返回的数据类型,可选:json、xml、script
clearForm true,表示成功提交后清除所有表单字段值
resetForm true,表示成功提交后重置所有字段
iframe 如果设置,表示将使用iframe方式提交表单
beforeSerialize 数据序列化前:function($form,options){}
beforeSubmit 提交前:function(arr,$from,options){}
success 提交成功后:function(data,statusText){}
error 错误:function(data){alert(data.message);}
ajaxSubmit示例:
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback // other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example:
//timeout: 3000
}; // bind to the form's submit event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options); // !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
其中参数配置大同小异。只是ajaxSubmit()可以任何时刻都能提交!
其他的API:
$('#myFormId').clearForm();
$('#myFormId .specialFields').clearFields();
$('#myFormId').resetForm();
var value = $('#myFormId :password').fieldValue();
var queryString = $('#myFormId .specialFields').fieldSerialize();
query插件之ajaxForm ajaxSubmit的理解用法的更多相关文章
- Jquery插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $( ...
- Jquery插件之ajaxForm ajaxSubmit的理解用法(转)
我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...
- jQuery Live Query 插件
http://www.cnblogs.com/sunjing/archive/2008/12/06/1349097.html 上篇日志里写到的那个问题其实有种更简单的解决办法,就是使用jquery的L ...
- elasticsearch 2.4在head删除数据(使用Delete By Query插件)
之所以说明是2.4版,是因为不同版本删除的语法不一样(例如跟5.x就不同) 首先安装Delete By Query插件,方式跟安装head插件差不多,安装命令:plugin install delet ...
- Jquery插件之ajaxForm简介
我们平常在使用jQuery异步提交表单的时候,一般都是加载在submit事件中,如下所示: $(document).ready(function(){ $('#myForm').submit(func ...
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- [No000011]Ruby之attr_reader,attr_writer,attr_accessor理解&用法
(Ruby/Python/Perl) Ruby 语言与Python和Perl的一个很大区别,在于Ruby中,所有的实例变量都是在类中完全私有的,只能通过accessor 方法来进行变量访问,引用一段代 ...
- Query插件
推荐一些常用感觉不错的jQuery插件 JQuery插件繁多,下面是个人在工作和学习中用到感觉不错的,特此记录. UI: jquery UI(官方的UI插件,很好很强大功能完备,灵活性很强,有十几套主 ...
- Query插件之ajaxFileUpload使用方法——input.change()事件的时候实现文件上传
点击下载 这是HTML <input id="uploadedfile" name="uploadedfile" type="file" ...
随机推荐
- List转换成Json、对象集合转换Json等
#region List转换成Json /// <summary> /// List转换成Json /// </summary> public static string Li ...
- 【跟我一起学Python吧】python with statement 进阶理解
由于之前有一个项目老是要打开文件,然后用pickle.load(file),再处理...最后要关闭文件,所以觉得有点繁琐,代码也不简洁.所以向python with statement寻求解决方法.以 ...
- RT-thread内核之进程间通信
这里面见到的同步和互斥的概念非常清晰,转载自: http://www.cnblogs.com/King-Gentleman/p/4311582.html 一.进程间通信机制 rt-thread操作系统 ...
- 关于Tokenizer与TokenFilter的区别
TokenStream是一个能在被调用后产生语汇单元流的类,但是 TokenStream 类有两个不同的类型:Tokenizer 类和 TokenFilter 类.这两个类都是从抽象类TokenStr ...
- java 图像分析与处理库
OpenCv4Android: http://opencv.org/platforms/android.html opencv官方中文文档: http://www.opencv.org.cn/open ...
- free 和 fclose
想到一个场景,具体代码如下 #include <stdio.h> #include <stdlib.h> int main(int argc, const char *argv ...
- (转)UML用例图总结
用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...
- Spring Autowiring by Name
In Spring, "Autowiring by Name" means, if the name of a bean is same as the name of other ...
- Linux平台部署varnish 高性能缓存服务器
一:varnish部署前准备: 1.1相关软件以及系统,web服务 系统要求:Centos 6(以上) (64位) 相关中间件:varnish-4.0.2 1.2相关系统依赖包安装检查准备 1.2.1 ...
- Intel HAXM
Hardware Accelerated Execution Manager的缩写. intel的硬件加速执行管理器,是一款可以使用英特尔虚拟化技术(VT)加快 Android* 开发速度的硬件辅助虚 ...