我们平常在使用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. //1、回调函数使用方法
  2. $('#form1').ajaxForm(function() {
  3. $('#output1').html("提交成功!").show();
  4. });
  5. $('#form1').ajaxSubmit(function() {
  6. $('#output2').html("提交成功!").show();
  7. });
  8. //2、option对象使用方法
  9. var ajax_option={
  10. target: '#output',          //把服务器返回的内容放入id为output的元素中
  11. beforeSubmit: showRequest,  //提交前的回调函数
  12. success: showResponse,      //提交后的回调函数
  13. url: url,                 //默认是form的action, 如果申明,则会覆盖
  14. type: type,               //默认是form的method(get or post),如果申明,则会覆盖
  15. dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
  16. clearForm: true,          //成功提交后,清除所有表单元素的值
  17. resetForm: true,          //成功提交后,重置所有表单元素的值
  18. timeout: 3000               //限制请求的时间,当请求大于3秒后,跳出请求
  19. };
  20. //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
  21. //jqForm:   jQuery对象,封装了表单的元素
  22. //options:  options对象
  23. function showRequest(formData, jqForm, options){
  24. var queryString = $.param(formData);   //name=1&address=2
  25. var formElement = jqForm[0];              //将jqForm转换为DOM对象
  26. var address = formElement.address.value;  //访问jqForm的DOM元素
  27. return true;  //只要不返回false,表单都会提交,在这里可以对表单元素进行验证
  28. };
  29. function showResponse(responseText, statusText){
  30. //dataType=xml
  31. var name = $('name', responseXML).text();
  32. var address = $('address', responseXML).text();
  33. $("#xmlout").html(name + "  " + address);
  34. //dataType=json
  35. $("#jsonout").html(data.name + "  " + data.address);
  36. };
  37. $('#form1').ajaxSubmit(ajax_option);

Jquery插件之ajaxForm简介的更多相关文章

  1. 【原创】书本翻页效果booklet jquery插件系列之简介

    booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...

  2. jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  3. Jquery插件之ajaxForm ajaxSubmit的理解用法

      如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如:   $(function(){ $( ...

  4. Jquery插件之ajaxForm ajaxSubmit的理解用法(转)

    我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...

  5. jQuery图片组展示插件----Galleria使用简介

    1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...

  6. jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  7. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  8. 制作一个简洁的jquery插件

    原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...

  9. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

随机推荐

  1. BFS【bzoj1667】: [Usaco2006 Oct]Cows on Skates滑旱冰的奶牛

    1667: [Usaco2006 Oct]Cows on Skates滑旱冰的奶牛 Description 经过跟Farmer John长达数年的谈判,奶牛们终于如愿以偿地得到了想要的旱冰鞋.农场上大 ...

  2. cs231n学习笔记(二)图像分类

    图像分类可说是计算机视觉中的基础任务同时也是核心任务,做好分类可为检测,分割等高阶任务打好基础. 本节课主要讲了两个内容,K近邻和线性分类器,都是以猫的分类为例. 一. K近邻 以猫的分类为例,一张含 ...

  3. 需要提升权限才能运行dism

    利用系统安装盘来安装.net3.5时,遇到的问题. [命令] dism.exe /online /enable-feature /featurename:NetFX3 /Source:F:\sourc ...

  4. Luogu P5201 [USACO19JAN]Shortcut 最短路树???

    最短路树...开眼界了...之前想也没想过.... 先跑出来1到每个点最短路,然后建树时要标记点的入度,否则会多连边...然后深搜时更新新答案就是 #include<cstdio> #in ...

  5. 图像数据转换成db(leveldb/lmdb)文件(转)

    参考网站:http://www.cnblogs.com/denny402/p/5082341.html 在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格 ...

  6. 笔记_简明Python教程_Byte_of_Python

    1. 局部变量.全局变量 局部变量: x = 50 def func(x): x = 2 print('Change local x to',x) func(x) print('x is still' ...

  7. php数组·的方法3-数组指针

    /* * 数组指针函数 * */ //key() current() 指针一直停在第一位 不会下移 echo '<hr>'; $arr5 = array('name' => 'hxq ...

  8. java——HashMap、Hashtable

    Map:类似Python的字典 HashMap: 不支持线程的同步,即同一时刻不能有多个线程同时写HashMap: 最多只允许一条记录的键值为null,不允许多条记录的值为null HashMap遍历 ...

  9. ORACLE CBC LATCH 检查

    ###############1.DB meet latch: cache buffers chains event from awr report ,check latch: cache buffe ...

  10. 转 Logs are not shipped to the physical standby database

    http://www.oracle-ckpt.com/dataguard_troubleshoot_snapper/ ######sample primay scripts: spool dg_Pri ...