form表单提交问题

时间:2022-11-04 19:14:43

1.提交后不能跳转到指定页面

jsp代码

form表单提交问题
form表单提交问题
<form class="form-horizontal" role="form">
<p class="task-title">新增</p>
<div id="field-list">
  <!--表单项-->
</div>
<button type="submit"</span> class="btn btn-primary" value="">保存</button>
</form>
form表单提交问题
form表单提交问题

js提交事件处理:

form表单提交问题
form表单提交问题
$(".btn-primary").click(function(){
$.post("url", {
para
}, function(data) {
window.history.back();
});
})
form表单提交问题
form表单提交问题

这种写法在页面点击保存后在当前页面跳转, 而不执行post请求function(data){}中的方法:window.history.back()返回到上一级历史页面,分析原因是button的type是submit, Submit会将表单提交(form.submit())作为其onclick后的默认事件, 执行完onClick, 转到action. 默认在当前页跳转.

这样不行于是试了试去掉type="submit"

<button class="btn btn-primary" value="">保存</button>

依然不行, 查了查发现<button> 这个按钮放在 form 中也会点击自动提交.

解决办法: type改成button

<button type="button" class="btn btn-primary" id="save_or_update_btn">保存</button>

于是可以了.

2.不用button的onclick()方法提交表单,改用form的onsubmit.

jsp代码

form表单提交问题
form表单提交问题
<form class="form-horizontal" role="form" method="post" onsubmit="return postData()">
<p class="task-title">新增</p>
<div id="field-list">
<!-- 表单项-->
</div>
<button type="submit"class="btn btn-primary" value="">保存</button>
</form>
form表单提交问题
form表单提交问题

js代码:

form表单提交问题
form表单提交问题
$(".btn-primary").click(function() {
$(".form-horizontal").submit();
}); function postData() {
$.post("url", $(".form-horizontal").serializeArray(), function(data) {
if (data) {
if (data.success){
location.href="url";
} else{ }
}
});
return false;
}
form表单提交问题
form表单提交问题

可以跳转到指定url了, 也可以保存数据到数据库, 但是会一次保存两条. 分析原因是因为form表单中的button有着自动提交功能, 点击保存后button提交一次, form表单中的onsubmit又执行postData()方法提交一次, 因此数据库中会存入两条相同的数据.

既然submit容易出错,那就不用submit了,改为如下代码:

jsp

form表单提交问题
form表单提交问题
<form class="form-horizontal" role="form" method="post" onsubmit="return postData()">
<p class="task-title">新增</p>
<div id="field-list">
  <!-- 表单项-->
</div>
<input type="button"</span> class="btn btn-primary" value = "保存">
</form>
form表单提交问题
form表单提交问题

js

form表单提交问题
form表单提交问题
$(".btn-primary").click(function() {
$(".form-horizontal").submit();
}); function postData() {
$.post("url", $(".form-horizontal").serializeArray(), function(data) {
if (data) {
if (data.success){
location.href="url";
} else{
}
}
});
return false;
}
form表单提交问题
form表单提交问题

这样就没有问题了, 可以成功保存一条数据, 并且保存之后可以跳转到指定url.

form表单提交问题的更多相关文章

  1. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  2. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  4. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  5. form表单提交

    1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  8. SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...

  9. Form表单提交,Ajax请求,&dollar;http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  10. js模拟form表单提交数据&comma; js模拟a标签点击跳转,避开使用window&period;open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

随机推荐

  1. DIOCP单元文件应用场景

    diocp.coder.tcpServer是用来做文件传输的 diocp.tcp.server这个是用来做通讯的

  2. ImageView

    ImageView支持的XML属性及相关方法 XML属性 相关方法 说明 android:adjustViewBounds setAdjustViewBounds(boolean) 是否调整自己的边界 ...

  3. ASP&period;NET连接远程Oracle数据库,提示试图加载格式不正确的程序

    VS调试远程连接Oracle数据库,一直报错 由于本地计算机是64位的操作系统,而且也确定安装的Oracle客户端是64位的 ,但是一直提示这个错误. 试了很多方法,终于发现可能是 不能在VS中调试的 ...

  4. phonegap 安装和使用eclipse

    1.下载nodejs...然后注销让nodejs可用 2.下载jdk,ant.和安卓的sdk. jdk是为ant编译时需要,设置JAVA_HOME环境变量 C:\Program Files\Java\ ...

  5. Java多态的体现之接口

    /** * * @author Administrator * 功能:接口体现多态 */ package com.test4; public class Test { public static vo ...

  6. 判断奇数,java陷阱

    /** 判断是否为奇数 @author husky / public class IsOdd { public static void main(String[] args) { int demo1 ...

  7. 201521123023《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 分析:该方法实现了ArrayList数组的遍历,从而确定所查内容是否存在 1 ...

  8. neutron是一个超级脚本的理解

    1.neutron 是由python写成,表面看有很多的字符串.逻辑处理,除去访问数据库.发送消息队列这些中间件的API调用外,其他部分大部分都在组装成一个shell命令. 并最终调用subproce ...

  9. div里 datapicker显示异常的情况之一

    现象:datepicker控价显示一半 因为Div高度太小所以设置一个最小高度min-height这样就可以让时间控价显示完整了.

  10. Scrum Meeting 11&period;09

    成员 今日任务 明日计划 用时 徐越 解决bug:可以重复点赞:answer被选为best answer后点赞数归零:首页不能正确显示问题的回复数.修改搜索功能的代码  继续测试相关app功能,如果达 ...