Jquery插件之ajaxForm简介
我们平常在使用jQuery异步提交表单的时候,一般都是加载在submit事件中,如下所示:
$(document).ready(function(){
$('#myForm').submit(function(){
$.ajax({
url:'www.xxx.com',
data:$('#myForm').serialize(),
dataType:'json',
error:function(data){
alert(data);
}
success:function(data){
alert(data);
} });
});
})
但是这样的方式掩盖了form的功能 ,使他变相的成为了无刷新的ajax技术 下面来看看更符合form的ajaxForm 1 //1、回调函数使用方法
$('#form1').ajaxForm(function() { //注意 ajaxForm是为表单提交做准备表单并不是真的提交 他需要用submit()方法来触发! ajaxForm接收0到1个参数!
$('#output1').html("提交成功!").show();// 这个参数可以是一个回调函数 也可以是一个options对象!
});
$('#form1').ajaxSubmit(function() { //ajaxSubmit是表单立即提交 该函数也接收0到1个参数 这个函数可以是一个匿名的回调函数 也可以是一个options对象//用法和ajaxForm类似
$('#output2').html("提交成功!").show();
}); //2、option对象使用方法
var ajax_option={
target: '#output', //把服务器返回的内容放到id为output的元素中
beforeSubmit: showRequest, //提交前的回调函数 beforeSubmit 回调函数作为一个钩子函数 常被用来运行预提交逻辑或者是检验表单的数局 如果在该函数中 return false 那么
//表单将不能提交 beforeSubmit带3个调用参数 这3个调用参数 你必须显示的调用 参数1. 数组对象 formData 参数2. jQuery表单对象 jqForm,
//参数3.options! 其中表单数组接受一下形式的数据:[{name:'username',value:'jianjie'},{name:'password',value:'screat'}]
success: showResponse, //提交成功后的回调函数
url: url, //提交的url地址 如果没有 则默认使用表单的action 如果有则覆盖
type: type, //提交数据的方式 如果没有 则默认使用表单的method 如果有则覆盖
dataType: null, //返回的数据类型 现阶段一般用json
clearForm: true, //提交成功后是否清空表单里面的数值 true为清空 false 为不清空
resetForm: true, //提交成功后是否重置表单中的数据 true为清空 false 为不清空
timeout: 3000 //设置请求的时间 超出时间则自动放弃连接
};
//formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象,封装了表单的元素
//options: options对象
function showRequest(formData, jqForm, options){
var queryString = $.param(formData); //序列化一个key/value对象 name=1&password=1234
var formElement = jqForm[0]; //jquery对象和js对象相互的转换
var address = formElement.address.value; //获取表单元素的 name=address的输入框的value值
return true; //只要不反回false 表单都会提交 在这里就对表单进行验证
};
function showResponse(responseText, statusText){
//dataType=xml
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
$("#xmlout").html(name + " " + address);
//dataType=json
$("#jsonout").html(data.name + " " + data.address);
};
$('#form1').ajaxSubmit(ajax_option);
ajaxForm和ajaxSubmit的区别 : ajaxForm不主动提交数据 需要事件触发 而ajaxSubmit直接就是提交表单不需要事件的触发
ajaxForm实质上也是$.ajax()实现的一种! 只不过ajaxForm更接近form的特性! 用法习惯依照个人习惯
- //1、回调函数使用方法
- $('#form1').ajaxForm(function() {
- $('#output1').html("提交成功!").show();
- });
- $('#form1').ajaxSubmit(function() {
- $('#output2').html("提交成功!").show();
- });
- //2、option对象使用方法
- var ajax_option={
- target: '#output', //把服务器返回的内容放入id为output的元素中
- beforeSubmit: showRequest, //提交前的回调函数
- success: showResponse, //提交后的回调函数
- url: url, //默认是form的action, 如果申明,则会覆盖
- type: type, //默认是form的method(get or post),如果申明,则会覆盖
- dataType: null, //html(默认), xml, script, json...接受服务端返回的类型
- clearForm: true, //成功提交后,清除所有表单元素的值
- resetForm: true, //成功提交后,重置所有表单元素的值
- timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
- };
- //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
- //jqForm: jQuery对象,封装了表单的元素
- //options: options对象
- function showRequest(formData, jqForm, options){
- var queryString = $.param(formData); //name=1&address=2
- var formElement = jqForm[0]; //将jqForm转换为DOM对象
- var address = formElement.address.value; //访问jqForm的DOM元素
- return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证
- };
- function showResponse(responseText, statusText){
- //dataType=xml
- var name = $('name', responseXML).text();
- var address = $('address', responseXML).text();
- $("#xmlout").html(name + " " + address);
- //dataType=json
- $("#jsonout").html(data.name + " " + data.address);
- };
- $('#form1').ajaxSubmit(ajax_option);
Jquery插件之ajaxForm简介的更多相关文章
- 【原创】书本翻页效果booklet jquery插件系列之简介
booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...
- jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- Jquery插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $( ...
- Jquery插件之ajaxForm ajaxSubmit的理解用法(转)
我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...
- jQuery图片组展示插件----Galleria使用简介
1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- jQuery插件之Cookie插件使用方法~
一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js 有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...
- 制作一个简洁的jquery插件
原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
随机推荐
- BFS【bzoj1667】: [Usaco2006 Oct]Cows on Skates滑旱冰的奶牛
1667: [Usaco2006 Oct]Cows on Skates滑旱冰的奶牛 Description 经过跟Farmer John长达数年的谈判,奶牛们终于如愿以偿地得到了想要的旱冰鞋.农场上大 ...
- cs231n学习笔记(二)图像分类
图像分类可说是计算机视觉中的基础任务同时也是核心任务,做好分类可为检测,分割等高阶任务打好基础. 本节课主要讲了两个内容,K近邻和线性分类器,都是以猫的分类为例. 一. K近邻 以猫的分类为例,一张含 ...
- 需要提升权限才能运行dism
利用系统安装盘来安装.net3.5时,遇到的问题. [命令] dism.exe /online /enable-feature /featurename:NetFX3 /Source:F:\sourc ...
- Luogu P5201 [USACO19JAN]Shortcut 最短路树???
最短路树...开眼界了...之前想也没想过.... 先跑出来1到每个点最短路,然后建树时要标记点的入度,否则会多连边...然后深搜时更新新答案就是 #include<cstdio> #in ...
- 图像数据转换成db(leveldb/lmdb)文件(转)
参考网站:http://www.cnblogs.com/denny402/p/5082341.html 在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格 ...
- 笔记_简明Python教程_Byte_of_Python
1. 局部变量.全局变量 局部变量: x = 50 def func(x): x = 2 print('Change local x to',x) func(x) print('x is still' ...
- php数组·的方法3-数组指针
/* * 数组指针函数 * */ //key() current() 指针一直停在第一位 不会下移 echo '<hr>'; $arr5 = array('name' => 'hxq ...
- java——HashMap、Hashtable
Map:类似Python的字典 HashMap: 不支持线程的同步,即同一时刻不能有多个线程同时写HashMap: 最多只允许一条记录的键值为null,不允许多条记录的值为null HashMap遍历 ...
- ORACLE CBC LATCH 检查
###############1.DB meet latch: cache buffers chains event from awr report ,check latch: cache buffe ...
- 转 Logs are not shipped to the physical standby database
http://www.oracle-ckpt.com/dataguard_troubleshoot_snapper/ ######sample primay scripts: spool dg_Pri ...