一般的form提交操作寫法為
. 代碼如下:
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存報告"/>
</form>
點擊submit按鈕或直接回車可以將數據提交到saveReport頁面,但是提交後也會跳轉到saveReport頁面
如何做到
將數據提交到saveReport(form的action指向)頁面,但是頁面又不進行跳轉,即保持當前頁面不變呢??
這種需要在load一個頁面的時候尤其迫切。
利用jquery的ajaxSubmit函數以及form的onsubmit函數完成,如下:
. 代碼如下:
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存報告"/>
</form>
form增加一個id用於在jquery中調用,增加一個onsubmit函數用於submit前自己提交表單
saveReport對應函數為
. 代碼如下:
function saveReport() {
// jquery 表單提交
$("#showDataForm").ajaxSubmit(function(message) {
// 對於表單提交成功後處理,message為提交頁面saveReport.htm的返回內容
});
return false; // 必須返回false,否則表單會自己再做一次提交操作,並且頁面跳轉
}