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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
Sort()函数的多种用法
Mar 20 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
koa-router源码学习小结
2018/09/07 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
python中xrange和range的区别
2014/05/13 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
对Python中range()函数和list的比较
2018/04/19 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python实现矩阵打印
2019/03/02 Python
python挖矿算力测试程序详解
2019/07/03 Python
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
预备党员党课思想汇报
2014/01/13 职场文书
活动策划邀请函
2014/02/06 职场文书
工程专业应届生求职信
2014/02/19 职场文书
社区矫正工作方案
2014/06/04 职场文书
销售团队口号大全
2014/06/06 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
比较几种Redis集群方案
2021/06/21 Redis
浅谈JavaScript作用域
2021/12/06 Javascript
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python