1.提交后不能跳转到指定页面
jsp代码
<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>
js提交事件处理:
$(".btn-primary").click(function(){
$.post("url", {
para
}, function(data) {
window.history.back();
});
})
这种写法在页面点击保存后在当前页面跳转, 而不执行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 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>
js代码:
$(".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;
}
可以跳转到指定url了, 也可以保存数据到数据库, 但是会一次保存两条. 分析原因是因为form表单中的button有着自动提交功能, 点击保存后button提交一次, form表单中的onsubmit又执行postData()方法提交一次, 因此数据库中会存入两条相同的数据.
既然submit容易出错,那就不用submit了,改为如下代码:
jsp
<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>
js
$(".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;
}
这样就没有问题了, 可以成功保存一条数据, 并且保存之后可以跳转到指定url.
form表单提交问题的更多相关文章
-
Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
-
jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
-
jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
-
Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
-
form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
-
ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
-
2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
-
SpringMVC中使用bean来接收form表单提交的参数时的注意点
这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...
-
Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
-
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
随机推荐
-
DIOCP单元文件应用场景
diocp.coder.tcpServer是用来做文件传输的 diocp.tcp.server这个是用来做通讯的
-
ImageView
ImageView支持的XML属性及相关方法 XML属性 相关方法 说明 android:adjustViewBounds setAdjustViewBounds(boolean) 是否调整自己的边界 ...
-
ASP.NET连接远程Oracle数据库,提示试图加载格式不正确的程序
VS调试远程连接Oracle数据库,一直报错 由于本地计算机是64位的操作系统,而且也确定安装的Oracle客户端是64位的 ,但是一直提示这个错误. 试了很多方法,终于发现可能是 不能在VS中调试的 ...
-
phonegap 安装和使用eclipse
1.下载nodejs...然后注销让nodejs可用 2.下载jdk,ant.和安卓的sdk. jdk是为ant编译时需要,设置JAVA_HOME环境变量 C:\Program Files\Java\ ...
-
Java多态的体现之接口
/** * * @author Administrator * 功能:接口体现多态 */ package com.test4; public class Test { public static vo ...
-
判断奇数,java陷阱
/** 判断是否为奇数 @author husky / public class IsOdd { public static void main(String[] args) { int demo1 ...
-
201521123023《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 分析:该方法实现了ArrayList数组的遍历,从而确定所查内容是否存在 1 ...
-
neutron是一个超级脚本的理解
1.neutron 是由python写成,表面看有很多的字符串.逻辑处理,除去访问数据库.发送消息队列这些中间件的API调用外,其他部分大部分都在组装成一个shell命令. 并最终调用subproce ...
-
div里 datapicker显示异常的情况之一
现象:datepicker控价显示一半 因为Div高度太小所以设置一个最小高度min-height这样就可以让时间控价显示完整了.
-
Scrum Meeting 11.09
成员 今日任务 明日计划 用时 徐越 解决bug:可以重复点赞:answer被选为best answer后点赞数归零:首页不能正确显示问题的回复数.修改搜索功能的代码 继续测试相关app功能,如果达 ...