使表单支持异步提交

每次页面中写异步请求时需要写一些重复性的代码，为什么html的表单不支持异步请求呢？无奈只好自己扩展一个了

先设计最终的使用效果

1. 给表单一个class标记，标识它使用ajax提交，class名就定为"ajaxForm"吧
2. 请求的url使用form的action，数据使用表单中元素的数据
3. 在form标签中加入一个onSuccess属性用来处理成功后逻辑，
   处理成功后首先弹出服务器返回的消息，
   有时希望跳转页面onSuccess="redirect::URL"，
   有时希望执行函数onSuccess="function:方法名"

最终效果

<form class="ajaxForm" action="URL" onSuccess="redirect:http://www.qq.com">
	<input type="text" name="name"/>
	<input type="submit" value="提交"/>
</form>

<form class="ajaxForm" action="URL" onSuccess="function:fun1">
	<input type="text" name="name">
	<input type="submit" value="提交"/>
</form>
<script>
	//data为服务器返回的数据
	function fun1(data){
		alert(data.code)
	}
</script>

实现同样的功能下，代码能少则少，多一行则多一份维护量，这才是程序员该有的懒样。

封装代码

$(window).on("submit","form.ajaxForm",function(){
	var $form=$(this);
	//支持jquery validate表单验证
	if(typeof $form.valid=="function"){
		//如果表单验证失败，不进行ajax请求
		if(!$form.valid()){
			return false;
		}
	}
	var beforeSubmit=$form.attr("beforeSubmit");
	if(beforeSubmit){
		var isContinue=(eval(beforeSubmit))();
		if(isContinue!=true){
			return false;
		}
	}
	var $submitBtn=$form.find(":submit,:button");
	$submitBtn.attr("disabled","disabled");
	$.post($form.attr("action"),$form.serialize(),function(data){
		$submitBtn.removeAttr("disabled");
		//ajax返回的数据需为json格式
		data=JSON.parse(data);
		if(data.message){
			alert(data.message);
		}
		//ajax返回的数据需有code属性，表明服务器处理是否正确
		if(data.code!="200"){
			return false;
		}
		var onSuccess=$form.attr("onSuccess");
		//ajax成功后事件
		if(onSuccess){
			var funPrefix="function:";
			var rediPrefix="redirect:";
			//执行某个函数
			if(onSuccess.startsWith(funPrefix)){
				var funName=onSuccess.substr(funPrefix.length);
				eval(funName)(data);
			}
			//调转到某个地址
			else if(onSuccess.startsWith(rediPrefix)){
				var rediURL=onSuccess.substr(rediPrefix.length);
				location.href=rediURL;
			}
		}
	});
	//防止表单提交
	return false;
});