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