form表单只提交数据而不进行页面跳转的解决方案
更新时间：2013年09月18日 17:58:34 作者：
将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？利用jquery的ajaxSubmit函数以及form的onsubmit函数完成
一般的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，否则表单会自己再做一次提交操作，并且页面跳转
}
复制代码 代码如下:
<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，否则表单会自己再做一次提交操作，并且页面跳转
}
相关文章
这篇文章主要介绍了Jquery简单实现GridView行高亮的方法,实例分析了jQuery页面元素的选择与属性操作的相关技巧,需要的朋友可以参考下2015-06-06
今天小编就为大家分享一篇jQuery 实现批量提交表格多行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要内容是JQuery实现可编辑的表格实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
Jquery操作radio,checkbox,select表单操作实现代码
Jquery操作radio,checkbox,select表单操作实现代码，需要用jquery操作表单的朋友可以参考下。2010-04-04
基于Bootstrap和jQuery构建前端分页工具实例代码
本文给大家介绍基于Bootstrap和jQuery构建前端分页工具实例代码，包括前端分页的优缺点和解决办法，对jquery bootstrap分页知识感兴趣的朋友一起通过本文学习吧2016-11-11
本文是小编自己写的一个弹出层插件代码，非常秀珍，感兴趣的朋友一起学习吧2016-05-05
基于jQuery的输入框在光标位置插入内容, 并选中功能的实现代码，需要的朋友可以参考下。2011-10-10
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。2010-09-09
在阅读本文之前，相信大家对 jQuery 的总体架构已经了解了，这一篇文章主要来介绍 jQuery 的入口函数 jQuery.fn.init。有需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
下面小编就为大家带来一篇jQuery 局部div刷新和全局刷新方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论