DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> form表單只提交數據而不進行頁面跳轉的解決方案
form表單只提交數據而不進行頁面跳轉的解決方案
編輯:JQuery特效代碼     
一般的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,否則表單會自己再做一次提交操作,並且頁面跳轉
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved