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>
點擊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>
點擊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實現(xiàn)頁面跳轉(zhuǎn)重定向的幾種方式
- js 控制頁面跳轉(zhuǎn)的5種方法
- JAVASCRIPT實現(xiàn)的WEB頁面跳轉(zhuǎn)以及頁面間傳值方法
- 用meta實現(xiàn)的頁面跳轉(zhuǎn)代碼
- js頁面跳轉(zhuǎn)的問題(跳轉(zhuǎn)到父頁面、最外層頁面、本頁面)
- js 有框架頁面跳轉(zhuǎn)(target)三種情況下的應(yīng)用
- javascript 頁面跳轉(zhuǎn)方法集合
- JSP頁面跳轉(zhuǎn)方法大全
相關(guān)文章
Jquery簡單實現(xiàn)GridView行高亮的方法
這篇文章主要介紹了Jquery簡單實現(xiàn)GridView行高亮的方法,實例分析了jQuery頁面元素的選擇與屬性操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要內(nèi)容是JQuery實現(xiàn)可編輯的表格實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼
Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼，需要用jquery操作表單的朋友可以參考下。2010-04-04
基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼，包括前端分頁的優(yōu)缺點和解決辦法，對jquery bootstrap分頁知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-11-11
本文是小編自己寫的一個彈出層插件代碼，非常秀珍，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中功能的實現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
13個絢麗的Jquery 界面設(shè)計網(wǎng)站推薦
今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動態(tài)切換視圖的相冊、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購物車功能，漂亮的Form表單元素等等。2010-09-09
在閱讀本文之前，相信大家對 jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
下面小編就為大家?guī)硪黄猨Query 局部div刷新和全局刷新方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10