form表單只提交數(shù)據(jù)而不進行頁面跳轉的解決方案
更新時間：2013年09月18日 17:58:34 作者：
將數(shù)據(jù)提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成
一般的form提交操作寫法為
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存報告"/>
</form>
點擊submit按鈕或直接回車可以將數(shù)據(jù)提交到saveReport頁面，但是提交后也會跳轉到saveReport頁面
如何做到
將數(shù)據(jù)提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？？
這種需要在load一個頁面的時候尤其迫切。
利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成，如下：
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存報告"/>
</form>
form增加一個id用于在jquery中調用，增加一個onsubmit函數(shù)用于submit前自己提交表單
saveReport對應函數(shù)為
function saveReport() {
// jquery 表單提交
$("#showDataForm").ajaxSubmit(function(message) {
// 對于表單提交成功后處理，message為提交頁面saveReport.htm的返回內(nèi)容
});
return false; // 必須返回false，否則表單會自己再做一次提交操作，并且頁面跳轉
}
復制代碼 代碼如下:
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存報告"/>
</form>
點擊submit按鈕或直接回車可以將數(shù)據(jù)提交到saveReport頁面，但是提交后也會跳轉到saveReport頁面
如何做到
將數(shù)據(jù)提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？？
這種需要在load一個頁面的時候尤其迫切。
利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成，如下：
復制代碼 代碼如下:
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存報告"/>
</form>
form增加一個id用于在jquery中調用，增加一個onsubmit函數(shù)用于submit前自己提交表單
saveReport對應函數(shù)為
復制代碼 代碼如下:
function saveReport() {
// jquery 表單提交
$("#showDataForm").ajaxSubmit(function(message) {
// 對于表單提交成功后處理，message為提交頁面saveReport.htm的返回內(nèi)容
});
return false; // 必須返回false，否則表單會自己再做一次提交操作，并且頁面跳轉
}
相關文章
效果類似這種，自動播放，實質控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12
這篇文章主要介紹了淺談jQuery事件綁定原理，并做了簡單分析，然后用實例來展示,需要的朋友可以參考下2015-01-01
jQuery+Ajax+PHP+Mysql實現(xiàn)分頁顯示數(shù)據(jù)實例講解
這是一個典型的Ajax應用，在頁面上，您只需要點擊“下一頁”，數(shù)據(jù)區(qū)將自動加載對應頁碼的數(shù)據(jù)，重新刷新數(shù)據(jù)區(qū)。類似的效果在很多網(wǎng)站上應用，尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁如淘寶商品列表頁，Ajax分頁效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09
Jquery使用JQgrid組件處理json數(shù)據(jù)
這篇文章介紹了Jquery使用JQgrid組件處理json數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了基于jQuery實現(xiàn)搜索關鍵字自動匹配功能，自動匹配搜索關鍵詞功能廣泛應用到搜索引擎當中，感興趣的小伙伴們可以參考一下2015-10-10
這篇文章主要介紹了jQuery右側選項卡焦點圖片輪播特效，一段清新可愛的焦點圖輪播代碼，有需要的小伙伴可以參考下2015-09-09
jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
今天小朋友寫了個程式，出現(xiàn)亂碼，將解決過程分享一下 為方便說明，將環(huán)境簡化，vs.net 2003, jquery-1.3.2.js, web service調用2010-02-02
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了8款超贊的jQuery評分插件，推薦給大家，有需要的小伙伴可以參考下2015-08-08