素材牛

jQuery Form一款简单强大的AJAX表单提交插件

 所属分类:网页特效,PHP/MySql-Ajax,表单/验证

 浏览:4744次-  下载:37次-  评论:60次-  发布时间:2017-08-15
jQuery Form一款简单强大的AJAX表单提交插件
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:jQueryForm有两个核心方法ajaxForm()和ajaxSubmit(),本素材我们重点介绍ajaxSubmit()的应用。

详细介绍

使用方法:

载入必要CSS、JS文件

<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script type="text/javascript" src="jquery.form.min.js">script>

接下来看一个初始配置和AJAX的一些操作

$(function(){
	var options = { 
        beforeSubmit:  showRequest,  // 提交表单前
        success:       showResponse,  // 处理完成之后
		resetForm: true, 
		dataType:  'json' 
    }; 
 
    // 提交表单 
    $('#my_form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
});
// 提交并判断表单
function showRequest(formData, jqForm, options) { 
	var uname = $("#uname").val();
	if(uname==""){
		$("#msg").html("姓名不能为空!");
		return false;
	}
	
	var age = $("#age").val();
	if(age==""){
		$("#msg").html("年龄不能为空!");
		return false;
	}
	$("#msg").html("正在提交...");
	
    
    return true; 
} 
 
// 提交表单返回值后的操作
function showResponse(responseText, statusText)  { 
	$("#msg").html('提交成功');
	var sex = responseText.sex==1?"男":"女";
	$("#output").html("姓名:"+responseText.uname+" 性别:"+sex+" 年龄:"+responseText.age);
} 

再来看一下post.php:

$arr = $_POST;
$arr['msg']=1;
echo json_encode($arr); //将PHP数组转换成JSON数据格式

处理表单数据这边就很简单了,无非就是接收数据,处理数据,返回数据了。

ajaxSubmit()还有很多的选项设置,下面列一些比较常用的:

属性描述
urlAjax请求将要提交到该url,默认是表单的action属性值
type指定提交表单数据的方法(method):“GET”或“POST”。默认值:表单的method属性值(如果没有找到默认为“GET”)。
dataType期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。
'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。。
'script':如果dataType == 'script', 服务器响应将求值成纯文本。。
默认值:null(服务器返回responseText值)
target指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。
beforeSubmit表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值:null
success表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null
clearForm表示如果表单提交成功是否清除表单数据。默认值:null
resetForm表示如果表单提交成功是否进行重置。默认值: null

jquery.form还有很多其他的方法,这里就不一一介绍了。以后有机会再发一些其他的

讨论这个素材(60)回答他人问题或分享使用心得会奖励牛币

huhuachuan
2016年08月02日

很基础的教程,对新手帮助很大

回复
蜡笔小丸子
2016年08月30日

入门级别的

回复
我是谁
2017年08月16日

很简单

回复
MOMIYU
2017年09月27日

这个厉害了!

回复
华夏nan
2017年10月20日

简洁清晰 感谢分享

回复
okky007
2017年10月20日

谢谢分享,收藏了~

回复
wpnl
2017年11月06日

不错66

回复
tanyoulin
2017年11月24日

厉害了我的歌

回复
longlong
2017年11月24日

简洁清晰 感谢分享

回复
595942125
2017年11月29日

感谢!很好用的

回复
smart812
2017年11月30日

感谢分享

回复
人在江湖飘
2017年12月07日

入门级的,很好

回复
人在江湖飘
2017年12月11日

感谢分享

回复
人在江湖飘
2017年12月14日

感谢

回复
我是小花匠
2017年12月14日

抓娃娃带分销  写的真好  三生三世

回复
我是小花匠
2017年12月18日

简洁清晰 感谢分享

回复
我是小花匠
2017年12月19日

因为刚好遇见你2017年08月21日 18:34

后台采集好生成出现这个提示“网站运行模式非静态,不允许生成”,怎么解决ssssssss

回复
我是小花匠
2017年12月19日

因为刚好遇见你2017年08月21日 18:34

后台采集好生成出现这个提示“网站运行模式非静态,不允许生成”,怎么解决sssvx

回复
我是小花匠
2017年12月19日

因为刚好遇见你2017年08月21日 18:34

后台采集好生成出现这个提示“网站运行模式非静态,不允许生成”,怎么解决sssvxsdsdsd

回复
我是小花匠
2017年12月19日

因为刚好遇见你2017年08月21日 18:34

后台采集好生成出现这个提示“网站运行模式非静态,不允许生成”,怎么解决sssvxsdsdsdgfgf

回复
我是小花匠
2017年12月26日

arr = $_POST;

回复
橘殃
2017年12月27日

可以

回复
18336357783
2017年12月28日

厉害了

回复
1471465028
2018年01月02日

入门级别的

回复
1471465028
2018年01月10日

很基础的教程,对新手帮助很大

回复
1471465028
2018年01月16日

这个很不错1的

回复
xiaochuiliu
2018年01月19日

这个干吗用呀

回复
yangds
2018年01月20日

不错

回复
1471465028
2018年01月22日

这和太棒了

回复
mcb
2018年01月25日

真实调好了

回复
1471465028
2018年01月29日
000
2018年02月05日

不错

回复
liunian
2018年02月07日

很实用的 

回复
钱掌柜阿周
2018年02月27日

很基础的教程,对新手帮助很大

回复
钱掌柜阿周
2018年03月01日

这个厉害了!

回复
钱掌柜贵哥
2018年03月01日

基础的教程,对新手帮助很大

回复
钱掌柜徐信爱
2018年03月01日

很简单

回复
卡神族
2018年03月01日

简洁清晰 感谢分享

回复
周川淇
2018年03月15日

厉害了我的歌

回复
卡神族
2018年03月15日

入门级别的

回复
857819854
2018年03月23日

材料可以  实用

回复
alone123
2018年04月04日

入门级别的

回复
1214741711
2018年04月04日

入门级别的

回复
857819854
2018年04月04日

入门级别的

回复
adonismis
2018年04月05日

good! 对新手帮助很大

回复
306241517
2018年04月16日

入门级别的

回复
hphxny
2018年04月20日

简洁清晰 感谢分享

回复
何去何从
2018年05月03日

用来学习

回复
何去何从
2018年05月04日

来学习学习

回复
b_andy
2018年05月31日

我也来学些知识感觉屌屌的

回复
JayrenLam
2018年06月01日

学习知识

回复
JayrenLam
2018年06月01日

学习知识的

回复
bigdog
2018年06月26日

入门级别的

回复
pluspig
2018年06月28日

学习知识的

回复
金麟岂是池中物
2018年09月03日

嗯,很不错

回复
玄道玄
2018年09月12日

挺好的,不错哈

回复
咯top
2018年10月10日

  评论提交成功!牛币 +2 经验 +1

回复
2199301988
2018年11月21日

挺好的,不错哈

回复
从前慢
2019年01月18日

能不能发下ajax整体验证的

回复
sususu
2019年03月25日

文件操作,常用实例教程方芳芳

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:37
所需牛币:1 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证