springmvc和jsp之間的那些事

問題：通過springmvc跳轉的jsp頁面有個表單，用ajax提交會導致頁面URL地址改變

<form id="register" >
                    <div class="input-group">
                        <span class="input-group-addon " ><label>*</label>用戶名</span>
                        <input type="text" class="form-control" name="userName" placeholder="用戶名" aria-describedby="basic-addon1">
                        <%--<span class="icon-group"></span>--%>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" >暱稱</span>
                        <input type="text" class="form-control" name="nickName" placeholder="暱稱" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" ><label>*</label>密碼</span>
                        <input type="password" class="form-control" id="password" name="passWord" placeholder="密碼" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" ><label>*</label>確認密碼</span>
                        <input type="password" class="form-control" name="confirmPwd" placeholder="確認密碼" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" >性別</span>
                        <input type="text" class="form-control" name="sex" placeholder="性別" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">電話</span>
                        <input type="text" class="form-control" name="mobile" placeholder="電話" aria-describedby="basic-addon1">
                    </div>
                    <button  class="register btn btn-default">註冊</button>
</form>

大家發現問題沒有？

(function () {
        //註冊頁面校驗
        $(document).on('click', '.register-page-wrap  .register.btn', function () {
            var $form = $('#register');
            if ($form.valid()) {

                var data = {
                    userName: $form.find('input[name="userName"]').val(),
                    nickName: $form.find('input[name="nickName"]').val(),
                    passWord: $form.find('input[name="passWord"]').val(),
                    confirmPwd: $form.find('input[name="confirmPwd"]').val(),
                    sex: $form.find('input[name="sex"]').val(),
                    mobile: $form.find('input[name="mobile"]').val()
                };
                //ajax請求
                $.ajax({
                    url: '${path}/user/register/save',
                    type: 'POST',
                    dataType: 'json',
                    data: data,
                    success:function (res) {
                        if (res.meta.status == 0) {
                            console.log("註冊成功");
                            window.location.href = "${path}/login.jsp";
                        } else {
                            console.log("註冊失敗");
                        }
                    }
                });
            }
        });

        $('#register').validate(
            {
                rules: {
                    userName: {
                        required: true,
                        minlength: 2
                    },
                    passWord: {
                        required: true,
                        minlength: 6
                    },
                    confirmPwd: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    }
                },
                messages: {
                    userName: {
                        required: '請填寫用戶名',
                        minlength: '用戶名長度不能小於2個字母'
                    },
                    passWord: {
                        required: '請設置密碼',
                        minlength: "密碼長度不能小於6個字母"
                    },
                    confirmPwd: {
                        required: '請確認密碼',
                        minlength: "密碼長度不能小於6個字母",
                        equalTo: "兩次密碼輸入不一致"
                    }
                }
            }
        );

    })(jQuery);

這種方式提交頁面的url會改變，ajax也執行了 ，但是會有意想不到的錯誤哦，如下圖：

原因分析：上面的表單的註冊按鈕button，沒有寫type類型，默認是submit，導致實際也執行了表單提交，由於form的method沒寫 也默認是get類型，所以URL會改變。

解決辦法：

1.在button這裏加入類型type=“button”

<button  type="button" class="register btn btn-default">註冊</button>

2.在js中加入return false；

$(document).on('click', '.register-page-wrap  .register.btn', function () {
            var $form = $('#register');
            if ($form.valid()) {

                var data = {
                    userName: $form.find('input[name="userName"]').val(),
                    nickName: $form.find('input[name="nickName"]').val(),
                    passWord: $form.find('input[name="passWord"]').val(),
                    confirmPwd: $form.find('input[name="confirmPwd"]').val(),
                    sex: $form.find('input[name="sex"]').val(),
                    mobile: $form.find('input[name="mobile"]').val()
                };
                //ajax請求
                $.ajax({
                    url: '${path}/user/register/save',
                    type: 'POST',
                    dataType: 'json',
                    data: data,
                    success:function (res) {
                        if (res.meta.status == 0) {
                            console.log("註冊成功");
                            window.location.href = "${path}/login.jsp";
                        } else {
                            console.log("註冊失敗");
                        }
                    }
                });
                return false;
            }
        });