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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
如何开发一个虚拟域名系统
2006/10/09 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
原生js生成图片验证码
2020/10/11 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
pycharm安装图文教程
2017/05/02 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
Java基础知识面试题
2014/03/25 面试题
大学生党员自我剖析材料
2014/10/06 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年残联工作总结
2014/11/21 职场文书
计算机专业自荐信
2015/03/05 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电