form表單提交問題

今天做form表單提交遇到了兩個問題:

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.