使表單支持異步提交

每次頁面中寫異步請求時需要寫一些重複性的代碼，爲什麼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;
});