form表單只提交數(shù)據(jù)而不進(jìn)行頁(yè)面跳轉(zhuǎn)的解決方案
更新時(shí)間：2013年09月18日 17:58:34 作者：
將數(shù)據(jù)提交到saveReport（form的action指向）頁(yè)面，但是頁(yè)面又不進(jìn)行跳轉(zhuǎn)，即保持當(dāng)前頁(yè)面不變呢？利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成
一般的form提交操作寫(xiě)法為
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存報(bào)告"/>
</form>
點(diǎn)擊submit按鈕或直接回車(chē)可以將數(shù)據(jù)提交到saveReport頁(yè)面，但是提交后也會(huì)跳轉(zhuǎn)到saveReport頁(yè)面
如何做到
將數(shù)據(jù)提交到saveReport（form的action指向）頁(yè)面，但是頁(yè)面又不進(jìn)行跳轉(zhuǎn)，即保持當(dāng)前頁(yè)面不變呢？？
這種需要在load一個(gè)頁(yè)面的時(shí)候尤其迫切。
利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成，如下：
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存報(bào)告"/>
</form>
form增加一個(gè)id用于在jquery中調(diào)用，增加一個(gè)onsubmit函數(shù)用于submit前自己提交表單
saveReport對(duì)應(yīng)函數(shù)為
function saveReport() {
// jquery 表單提交
$("#showDataForm").ajaxSubmit(function(message) {
// 對(duì)于表單提交成功后處理，message為提交頁(yè)面saveReport.htm的返回內(nèi)容
});
return false; // 必須返回false，否則表單會(huì)自己再做一次提交操作，并且頁(yè)面跳轉(zhuǎn)
}
復(fù)制代碼 代碼如下:
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存報(bào)告"/>
</form>
點(diǎn)擊submit按鈕或直接回車(chē)可以將數(shù)據(jù)提交到saveReport頁(yè)面，但是提交后也會(huì)跳轉(zhuǎn)到saveReport頁(yè)面
如何做到
將數(shù)據(jù)提交到saveReport（form的action指向）頁(yè)面，但是頁(yè)面又不進(jìn)行跳轉(zhuǎn)，即保持當(dāng)前頁(yè)面不變呢？？
這種需要在load一個(gè)頁(yè)面的時(shí)候尤其迫切。
利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成，如下：
復(fù)制代碼 代碼如下:
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存報(bào)告"/>
</form>
form增加一個(gè)id用于在jquery中調(diào)用，增加一個(gè)onsubmit函數(shù)用于submit前自己提交表單
saveReport對(duì)應(yīng)函數(shù)為
復(fù)制代碼 代碼如下:
function saveReport() {
// jquery 表單提交
$("#showDataForm").ajaxSubmit(function(message) {
// 對(duì)于表單提交成功后處理，message為提交頁(yè)面saveReport.htm的返回內(nèi)容
});
return false; // 必須返回false，否則表單會(huì)自己再做一次提交操作，并且頁(yè)面跳轉(zhuǎn)
}
您可能感興趣的文章:
- js頁(yè)面跳轉(zhuǎn)常用的幾種方式
- jsp下頁(yè)面跳轉(zhuǎn)的幾種方法小結(jié)
- java servlet 幾種頁(yè)面跳轉(zhuǎn)的方法
- js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式
- js 控制頁(yè)面跳轉(zhuǎn)的5種方法
- JAVASCRIPT實(shí)現(xiàn)的WEB頁(yè)面跳轉(zhuǎn)以及頁(yè)面間傳值方法
- 用meta實(shí)現(xiàn)的頁(yè)面跳轉(zhuǎn)代碼
- js頁(yè)面跳轉(zhuǎn)的問(wèn)題(跳轉(zhuǎn)到父頁(yè)面、最外層頁(yè)面、本頁(yè)面)
- js 有框架頁(yè)面跳轉(zhuǎn)(target)三種情況下的應(yīng)用
- javascript 頁(yè)面跳轉(zhuǎn)方法集合
- JSP頁(yè)面跳轉(zhuǎn)方法大全
相關(guān)文章
Jquery簡(jiǎn)單實(shí)現(xiàn)GridView行高亮的方法
這篇文章主要介紹了Jquery簡(jiǎn)單實(shí)現(xiàn)GridView行高亮的方法,實(shí)例分析了jQuery頁(yè)面元素的選擇與屬性操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
jQuery實(shí)現(xiàn)可編輯的表格實(shí)例講解（2）
這篇文章主要內(nèi)容是JQuery實(shí)現(xiàn)可編輯的表格實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
Jquery操作radio,checkbox,select表單操作實(shí)現(xiàn)代碼
Jquery操作radio,checkbox,select表單操作實(shí)現(xiàn)代碼，需要用jquery操作表單的朋友可以參考下。2010-04-04
基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼，包括前端分頁(yè)的優(yōu)缺點(diǎn)和解決辦法，對(duì)jquery bootstrap分頁(yè)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-11-11
本文是小編自己寫(xiě)的一個(gè)彈出層插件代碼，非常秀珍，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中功能的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
13個(gè)絢麗的Jquery 界面設(shè)計(jì)網(wǎng)站推薦
今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動(dòng)態(tài)切換視圖的相冊(cè)、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購(gòu)物車(chē)功能，漂亮的Form表單元素等等。2010-09-09
在閱讀本文之前，相信大家對(duì) jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來(lái)介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
下面小編就為大家?guī)?lái)一篇jQuery 局部div刷新和全局刷新方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10