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 一些用法小结
Sep 11 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
生成缩略图
2006/10/09 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP之预定义接口详解
2015/07/29 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP7内核之Reference详解
2019/03/14 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
微信小程序实现打卡日历功能
2020/09/21 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Django时区详解
2019/07/24 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
情侣吵架检讨书
2014/02/05 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
行政处罚事先告知书
2015/07/01 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python