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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
原生JavaScript实现随机点名表
Jan 14 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP goto语句用法实例
2019/08/06 PHP
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python库matplotlib绘制坐标图
2019/10/18 Python
如何使用python传入不确定个数参数
2020/02/18 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
介绍一下Linux文件的记录形式
2012/04/18 面试题
一封普通求职者的求职信
2013/11/20 职场文书
农救科工作职责
2013/11/27 职场文书
毕业生自荐信
2013/12/14 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
庆祝教师节标语
2014/10/09 职场文书
python 对图片进行简单的处理
2021/06/23 Python