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汉字转拼音实现代码
Feb 06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
Js apply方法详解
2017/02/16 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python向图片里添加文字
2019/11/26 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python入门之基础语法详解
2021/05/11 Python