form表单只提交数据而不进行页面跳转的解决方案

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

赞 (0)

相关推荐

  • EasyUI中实现form表单提交的示例分享

    复制代码 代码如下: $('#form').form({   url : 'test/add.do',   onSubmit : function() {    parent.$.messager.progress({     title : '提示',     text : '数据处理中,请稍后....'    });    var gridValid = endEdit();// 子表退出编辑验证    if (!gridValid) {     parent.$.messager.prog

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • onsubmit阻止form表单提交与onclick的相关操作

    1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处.function 复制代码 代码如下: function chkinput(form) { if(form.title.value=="") { alert("请输入

  • 使用javascript提交form表单方法汇总

    废话就不多说了,直接上内容. <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="searchTxt" class="searchT

  • form表单只提交数据而不进行页面跳转的解决方案

    一般的form提交操作写法为 复制代码 代码如下: <form action="saveReport.htm" method="post"> -- <input type="submit" value="保存报告"/> </form> 点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveRepor

  • layui实现form表单同时提交数据和文件的代码

    1.jsp页面 ·html代码 <%--用户注册的弹出框--%> <div id="userDiv" style="display: none;"> <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data"> <input t

  • 使用Ajax方法实现Form表单的提交及注意事项

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

  • php解决和避免form表单重复提交的几种方法

    前言 为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶

  • form表单传递数组数据、php脚本接收的实例

    通过数组传递表单数据,可以保存数据之间的业务属性关系,比如有很多Student,每隔Student都有姓名.年龄.性别.爱好等表单信息.提交表单后还需要针对每个student进行处理或者保存.这样肯定需要为每个student的这些属性表单建立起关联关系,一种方式是根据属性表单的name上加特殊标记进行识别,但是数组传递表单就能使表单数据更结构化. 例子如下: <input type="hidden" name="msginfo[name][]" value=&

  • 防止Layui form表单重复提交的实现方法

    在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在<form>里面,加上 lay-filter="formConfig" , οnsubmit="return false" , 其中 "formConfig" 为自定义,然后在 提交的按钮事件内: form.on("submit(formConfig)",function(data){

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • 微信小程序使用form表单获取输入框数据的实例代码

    微信小程序使用form表单获取输入框数据的实例代码

    本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng

  • 微信小程序实现form表单本地储存数据

    本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加. login.wxml代码: <!--pages/login/login.wxml--> <view class='container'> <form bindsubmit='submit'

  • 使用layui前端框架弹出form表单以及提交的示例

    第一步: 引用两个文件 第二步: 点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr("id"); layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , ic

随机推荐