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. mysql 快速简单安装法

    网上下载的编译好的包 最好安装在 /usr/local 目录下面: 我用的mysql的版本的是:mysql--linux-i686-icc-glibc23.tar.gz 在官网上就可以下载到. 先期工 ...

  2. mysql基于“时间”的盲注

    无需页面报错,根据页面响应时间做判断! mysql基于时间的盲注 =================================================================== ...

  3. c/c++ long long 和__64int区别

    在C/C++中,64为整型一直是一种没有确定规范的数据类型.现今主流的编译器中,对64为整型的支持也是标准不一,形态各异.一般来说,64位整型的定义方式有long long和__int64两种(VC还 ...

  4. EST

    表达序列标签(expressed sequence tags,ESTs)是指从不同组织来源的cDNA序列.这一概念首次由Adams 等于1991年提出.近年来由此形成的技术路线被广泛应用于基因识别.绘 ...

  5. 分分钟教你从根本上认识Struts2框架

    在了解Struts2之前我们先来聊聊Struts1,我们都知道在很长的一段时间内,所有的MVC框架中,Struts1他是处于一个超级大咖的地位,无论是从市场角度和使用的用户的数量这个角度而言,Stru ...

  6. java基础知识(十一)java反射机制(上)

    java.lang.Class类详解 java Class类详解 一.class类 Class类是java语言定义的特定类的实现,在java中每个类都有一个相应的Class对象,以便java程序运行时 ...

  7. postgresql中的CUBE函数

    数据函数简介添加汇总额外信息 数据 --复杂统计函数 CREATE TABLE t3 (color_type varchar(20), in_date varchar(30),color_count ...

  8. js面向对象

    什么事面向对象 用对象的思想去写代码,就是面向对象编程 面向对象编程(OOP)的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 多态:多对象的不同形态 对象的 ...

  9. 关于a标签自身的click事件所带来的一些影响

    众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...

  10. js日期相关

    时间戳转正常日期时间 1469512964000 —> 2016/7/26 下午2:02 var getLocalTime = function(nS) { // 13位时间戳 return n ...