Form表單只提交field的值，而不進行頁面跳轉

根據html規范，一般的form寫法如下：

<form action="operation.htm" method="post">
	……
	<input type="submit" value="保存報告"/>
</form>

 

點擊submit按鈕或直接回車可以將數據提交到operation.htm頁面，但是submit后頁面也會跳轉到operation.htm頁面。

如何做到：將數據提交到operation.htm（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？？

這種需求一般是在需要異步提交的時候出現。

利用jquery的ajaxSubmit函數以及form的onsubmit函數完成，如下：

<form id="submitForm" action="operation.htm" method="post" onsubmit="return operate();">
	<input type="submit" value="保存"/>
</form>

 

form增加一個id用於在jquery中調用，增加一個onsubmit函數用於submit前自己提交表單

operate對應函數為

function operate() {
	// jquery 表單提交
	$("#submitForm").ajaxSubmit(function(message) {
	      // 對於表單提交成功后處理，message為提交頁面operation.htm的返回內容
	   });
	
	return false; // 必須返回false，否則表單會自己再做一次提交操作，並且頁面跳轉
}