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跟随滚动条滚动浮动代码
Dec 31 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
javascript折半查找详解
Jan 26 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue引用js文件的多种方式(推荐)
May 17 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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
7个超级实用的PHP代码片段
2011/07/11 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP的引用详解
2015/02/22 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
五年级语文教学反思
2014/01/30 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
民事答辩状格式范文
2015/05/21 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS