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入门指导
Nov 01 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS中表单的使用小结
2014/01/11 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python List cmp()知识点总结
2019/02/18 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
自我鉴定注意事项
2014/01/19 职场文书
检讨书格式
2015/01/23 职场文书
计生个人工作总结
2015/02/28 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
python 爬取吉首大学网站成绩单
2021/06/02 Python