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 ...
随机推荐
- 梯度下降&随机梯度下降&批梯度下降
梯度下降法 下面的h(x)是要拟合的函数,J(θ)损失函数,theta是参数,要迭代求解的值,theta求解出来了那最终要拟合的函数h(θ)就出来了.其中m是训练集的记录条数,j是参数的个数. 梯 ...
- J.U.C AQS(abstractqueuedssynchronizer--同步器)
J.U.C AQS(abstractqueuedssynchronizer--同步器) 同步器是用来构建锁和其他同步组件的基础框架,它的实现主要依赖一个int成员变量来表示同步状态以及通过一个FI ...
- 小程序scroll-view采坑
scroll-view分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.
- MPI环境配置
单机多核配置:https://www.cnblogs.com/shixiangwan/p/6626156.html 多计算机配置:https://blog.csdn.net/WASEFADG/arti ...
- 第一册:lesson 125.
原文: Tea for two. question:Does Susan have tea by herself? Can't you come in and have tea now Piter? ...
- phpSpreadSheet 中 使用的 一些坑
如果是upupw,它 做了 安全限制...将 上传目录 写成 uploadfiles 等 才能 写进去.. 文件路径 也不要有 中文..很有可以能 下载时 找不到路径....这个太坑...
- 江西财经大学第一届程序设计竞赛 C
链接:https://www.nowcoder.com/acm/contest/115/C来源:牛客网 题目描述 决赛圈还剩下两个人,“伏地魔”XDD和跑毒进圈的FZL,XDD拿着狙击枪AWM瞄准并准 ...
- JS函数调用分析过程
- SecureCRT 遇到一个致命的错误且必须关闭
1.将报错路径中VanDyke文件夹内的东西删除掉2.运行regedit,在注册表中将HKEY_LOCAL_MACHINA中SOFTWARE里的VanDyke删除3.注册表中打开HKEY_CURREN ...
- 在vue2.x中安装sass并配置
在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v 表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑 一.先安装sass cmd打开命令行,到项目 ...