素材牛

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

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

 浏览:2594次  下载:25次  评论:47次  发布时间: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还有很多其他的方法,这里就不一一介绍了。以后有机会再发一些其他的

讨论这个项目(47)回答他人问题或分享插件使用方法奖励牛币

Lv 牛魔王

    huhuachuan
    2016年08月02日 23:17

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

    回复

Lv1 青铜

    蜡笔小丸子
    2016年08月30日 23:56

Lv1 青铜

    我是谁
    2017年08月16日 17:07

Lv1 青铜

    MOMIYU
    2017年09月27日 09:02

Lv7 钻石1

    华夏nan
    2017年10月20日 09:20

    简洁清晰 感谢分享

    回复

Lv4 铂金1

    okky007
    2017年10月20日 11:10

    谢谢分享,收藏了~

    回复

Lv3 黄金

    wpnl
    2017年11月06日 21:58

Lv2 白银

    tanyoulin
    2017年11月24日 09:13

Lv2 白银

    longlong
    2017年11月24日 09:52

    简洁清晰 感谢分享

    回复

Lv6 铂金3

    595942125
    2017年11月29日 13:19

Lv2 白银

    smart812
    2017年11月30日 23:13

Lv2 白银

    人在江湖飘
    2017年12月07日 08:36

Lv2 白银

    人在江湖飘
    2017年12月11日 15:41

Lv2 白银

    人在江湖飘
    2017年12月14日 09:06

Lv2 白银

    我是小花匠
    2017年12月14日 12:15

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

    回复

Lv2 白银

    我是小花匠
    2017年12月18日 10:19

    简洁清晰 感谢分享

    回复

Lv2 白银

    我是小花匠
    2017年12月19日 08:37

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

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

    回复

Lv2 白银

    我是小花匠
    2017年12月19日 08:37

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

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

    回复

Lv2 白银

    我是小花匠
    2017年12月19日 08:41

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

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

    回复

Lv2 白银

    我是小花匠
    2017年12月19日 08:43

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

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

    回复

Lv2 白银

    我是小花匠
    2017年12月26日 10:24

Lv2 白银

    橘殃
    2017年12月27日 20:58

Lv5 铂金2

    18336357783
    2017年12月28日 10:11

Lv4 铂金1

    1471465028
    2018年01月02日 10:28

Lv4 铂金1

    1471465028
    2018年01月10日 16:48

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

    回复

Lv4 铂金1

    1471465028
    2018年01月16日 10:18

Lv1 青铜

    xiaochuiliu
    2018年01月19日 00:17

Lv1 青铜

    yangds
    2018年01月20日 19:36

Lv4 铂金1

    1471465028
    2018年01月22日 16:37

Lv2 白银

    mcb
    2018年01月25日 08:12

Lv4 铂金1

    1471465028
    2018年01月29日 10:06

Lv2 白银

    000
    2018年02月05日 17:39

Lv2 白银

    liunian
    2018年02月07日 16:57

Lv4 铂金1

    钱掌柜阿周
    2018年02月27日 20:42

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

    回复

Lv4 铂金1

    钱掌柜阿周
    2018年03月01日 13:43

Lv3 黄金

    钱掌柜贵哥
    2018年03月01日 13:47

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

    回复

Lv3 黄金

    钱掌柜徐信爱
    2018年03月01日 13:53

Lv4 铂金1

    卡神族
    2018年03月01日 13:59

    简洁清晰 感谢分享

    回复

Lv3 黄金

    周川淇
    2018年03月15日 23:41

Lv4 铂金1

    卡神族
    2018年03月15日 23:44

Lv5 铂金2

    857819854
    2018年03月23日 10:39

Lv4 铂金1

    alone123
    2018年04月04日 16:20

Lv5 铂金2

    1214741711
    2018年04月04日 16:23

Lv5 铂金2

    857819854
    2018年04月04日 16:26

Lv1 青铜

    adonismis
    2018年04月05日 23:04

    good! 对新手帮助很大

    回复

Lv2 白银

    306241517
    2018年04月16日 18:04

Lv2 白银

    hphxny
    2018年04月20日 11:49

    简洁清晰 感谢分享

    回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数:25
所需牛币:1 开始下载
会员账号
会员密码
安全验证