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 字符串乘法
Aug 20 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue动态配置模板 'component is'代码
Jul 04 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript事件列表解说
2006/12/22 Javascript
javascript 写类方式之七
2009/07/05 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
详解python之配置日志的几种方式
2017/05/22 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
基于pandas中expand的作用详解
2019/12/17 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
烹调加工管理制度
2014/02/04 职场文书
打架检讨书2000字
2014/02/22 职场文书
协议书样本
2014/04/23 职场文书
2014年卫生工作总结
2014/11/27 职场文书
事业单位岗位说明书
2015/10/08 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python