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 相关文章推荐
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue中实现动态生成二维码的方法
Feb 21 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加密解密函数(动态加密)
2013/06/19 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python爬取m3u8连接的视频
2018/02/28 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python生成n个元素的全组合方法
2018/11/13 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
班级班风口号大全
2015/12/25 职场文书
小学新课改心得体会
2016/01/22 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL