我们平常在使用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. 梯度下降&随机梯度下降&批梯度下降

    梯度下降法 ​ 下面的h(x)是要拟合的函数,J(θ)损失函数,theta是参数,要迭代求解的值,theta求解出来了那最终要拟合的函数h(θ)就出来了.其中m是训练集的记录条数,j是参数的个数. 梯 ...

  2. J.U.C AQS(abstractqueuedssynchronizer--同步器)

    J.U.C AQS(abstractqueuedssynchronizer--同步器)   同步器是用来构建锁和其他同步组件的基础框架,它的实现主要依赖一个int成员变量来表示同步状态以及通过一个FI ...

  3. 小程序scroll-view采坑

    scroll-view分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.

  4. MPI环境配置

    单机多核配置:https://www.cnblogs.com/shixiangwan/p/6626156.html 多计算机配置:https://blog.csdn.net/WASEFADG/arti ...

  5. 第一册:lesson 125.

    原文: Tea for two. question:Does Susan have tea by herself? Can't you come in and have tea now Piter? ...

  6. phpSpreadSheet 中 使用的 一些坑

    如果是upupw,它 做了 安全限制...将 上传目录 写成 uploadfiles 等 才能 写进去.. 文件路径 也不要有 中文..很有可以能 下载时 找不到路径....这个太坑...

  7. 江西财经大学第一届程序设计竞赛 C

    链接:https://www.nowcoder.com/acm/contest/115/C来源:牛客网 题目描述 决赛圈还剩下两个人,“伏地魔”XDD和跑毒进圈的FZL,XDD拿着狙击枪AWM瞄准并准 ...

  8. JS函数调用分析过程

  9. SecureCRT 遇到一个致命的错误且必须关闭

    1.将报错路径中VanDyke文件夹内的东西删除掉2.运行regedit,在注册表中将HKEY_LOCAL_MACHINA中SOFTWARE里的VanDyke删除3.注册表中打开HKEY_CURREN ...

  10. 在vue2.x中安装sass并配置

    在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v 表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑 一.先安装sass cmd打开命令行,到项目 ...