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表单提交问题的更多相关文章

  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请求,$http请求的区别

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

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

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

随机推荐

  1. yii2 解决POST 400错误

    第一种解决办法是关闭Csrf public function init(){ $this->enableCsrfValidation = false; } 第二种解决办法是在form表单中加入隐 ...

  2. web性能优化

    常用方法 压缩源码和图片 JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩 ...

  3. jQuery学习过程问题笔记

    1.  jQuery中,$('selector').click(function(){})和用bind绑定:$('selector').bind('click',function(){})有什么区别? ...

  4. 各大浏览器内核介绍(Rendering Engine)

    在介绍各大浏览器的内核之前,我们先来了解一下什么是浏览器内核. 所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine",译为"渲染引擎&qu ...

  5. expect实现自动登录

    自动登录主机(ssh) 建脚本item2login.sh,包含如下内容 #!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [ ...

  6. Fiddler将笔记本设置代理,抓取手机网络请求包

    第一步:下载fiddler,下载地址:http://www.telerik.com/download/fiddler 第二步:安装fiddler,略过... 第三步:启动fiddler,启动后界面如下 ...

  7. 增量式PID推导及C语言实现

    PID控制器表达式为: \[ u(t) = K_pe(t) + K_i\int_0^t e(\tau)d\tau + K_d\frac{de(t)}{dt} \] 离散化: 令 $ t = nT,~T ...

  8. SAP模板

    用的是kuangbin的模板:http://www.cnblogs.com/kuangbin/archive/2012/09/29/2707955.html ;//点数的最大值 ;//边数的最大值 c ...

  9. [原创]css3简单几步画一个乾坤图

    效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;bo ...

  10. selenium webdriver 建行软键盘输入密码

    driver.get("https://ibsbjstar.ccb.com.cn/app/V5/CN/STY1/login.jsp"); driver.manage().timeo ...