form表单只提交数据而不进行页面跳转的解决方案


Posted in Javascript onSeptember 18, 2013

一般的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,否则表单会自己再做一次提交操作,并且页面跳转 
}
Javascript 相关文章推荐
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
vue中如何使用ztree
Feb 06 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
js 中的switch表达式使用示例
Jun 03 #Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 #Javascript
jquery等宽输出文字插件使用介绍
Sep 18 #Javascript
You might like
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
html下载本地
2006/06/19 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
详解javascript高级定时器
2015/12/31 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
Django中几种重定向方法
2015/04/28 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
基于python绘制科赫雪花
2018/06/22 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
python中提高pip install速度
2020/02/14 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
婚纱摄影师求职信范文
2014/04/17 职场文书
2014年度工作总结报告
2014/12/15 职场文书
送达通知书
2015/04/25 职场文书