一般的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,否则表单会自己再做一次提交操作,并且页面跳转 

form表单只提交数据而不进行页面跳转的解决方案的更多相关文章

  1. Jquery构建Form表单Post提交数据的简单方法

    $.extend({ PostSubmitForm: function (url, args) { var body = $(document.body), form = $("<fo ...

  2. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  3. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  4. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  5. JavaWeb学习总结(十一):Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  6. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  7. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  8. form表单ajax提交

    这里下面有两种  第一种是form表单里面添加了数据,并且含有上传的图片,第二种是from表单中不含有图片  只有普通数据 第一种form表单中包含有图片的类型: <form method=&q ...

  9. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. 23Mybatis_根据订单商品数据模型的练习对resultMap和resulttype的总结

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  2. 用Swift GestureRecognizer 的几个注意点

    最近做了一些关于 GestureRecognizer 的工作 ,随笔记录一些需要注意的点: 1. PanGestureRecognizer (1)在使用时 注意在哪个view添加了 手势识别 self ...

  3. py变量

        1, python以数据为主 x=2,是给数据2开辟了个空间, X指向了2 y=x ,即y指向了2 x=5 ,x重新赋值 但是y依旧是原来的

  4. web前端开发资源整理

    webpack中文文档 http://webpackdoc.com/index.html 饿了么UI http://mint-ui.github.io/#!/zh-cn http://element. ...

  5. 说说C#中IList与List区别

    首先IList 泛型接口是 ICollection 泛型接口的子代,并且是所有泛型列表的基接口. 它仅仅是所有泛型类型的接口,并没有太多方法可以方便实用,如果仅仅是作为集合数据的承载体,确实,ILis ...

  6. Android Studio配置Git及Git文件状态说明

    Android Studio配置Git还是比较简单的,麻烦的是可能中间出现各种问题.如果你想了解或感兴趣,请往下看. 首先你得下载Git客户端,网址:http://git-scm.com/downlo ...

  7. 《1024伐木累》-te别篇,庭审你知道吗?

    思前想后,我觉得不应该发这一期,因为,做完这一期之后突然发觉,自己失去了主题,到底是在讽刺?还是在讽刺?还是在讽刺呢?不论是什么,大家自己判断吧.就当作者不想发表自己的观点,先看这一期的对白吧! 1. ...

  8. Android学习第六弹之Touch事件的处理

    在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...

  9. promise与aysnc 与EventProxy

    promise 已经是 es6推荐的内置的东西了,所以我们需要清楚. promise的使用类似与jquery的链式操作,.then()  .then()中不断使用.回调看上去清晰明了,建议使用. as ...

  10. 《TCP/IP详解卷1:协议》第11章 UDP:用户数据报协议-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...