你的位置:首页 > Java教程

[Java教程]form表单提交问题


今天做form表单提交遇到了两个问题:

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

jsp代码

<form role="form">    <p >新增</p>    <div id="field-list">    <!--表单项-->    </div>    <button type="submit"</span> 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 value="">保存</button>

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

 

解决办法: type改成button

 

<button type="button" id="save_or_update_btn">保存</button>

 

 

于是可以了.

 

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

jsp代码

<form role="form" method="post" onsubmit="return postData()">    <p >新增</p>    <div id="field-list"><!-- 表单项-->    </div>    <button type="submit" 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 role="form" method="post" onsubmit="return postData()">    <p >新增</p>    <div id="field-list">    <!-- 表单项-->    </div>    <input type="button"</span> 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.