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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
yii操作cookie实例简介
2014/07/09 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
一套Delphi的笔试题二
2013/05/11 面试题
乡镇庆八一活动方案
2014/02/02 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL