Javascript / Jquery：setTimeout函數未通過匿名函數運行AJAX查詢

Question

我正在使用一些漂亮的動畫制作登錄頁面。 我希望能夠在用戶提交登錄信息后運行自定義動畫時暫停腳本。 為了簡化：

行為：用戶提交登錄->加載自定義動畫->等待5秒鍾->執行AJAX發布->當前錯誤或導航到首頁

這是我最有效的代碼

    function ValidateUser() {
        var userid = $("#Username").attr('value');
        var pass = $("#Password").attr('value');
        var url = "/Account/ValidateUser";
        var $this = $('.login'),
          $state = $this.find('button > .state');
        $this.addClass('loading');
        $state.html('Authenticating');
        setTimeout(function () {
            $.ajax({
                url: url,
                data: { username: userid, password: pass },
                cache: false,
                type: "POST",
                success: function (data) {
                    if (data == "1") {
                        $this.addClass('ok');
                        $state.html('Welcome back!');
                        window.location.href = "Home/Index";
                    } else {
                        $state.html('Incorrect username or password!');
                        $this.addClass('loginError');
                        $this.removeClass('ok loading');
                    }
                    $("#txtuserid").attr({ 'value': '' });
                    $("#txtpassword").attr({ 'value': '' });
                },
                error: function (reponse) {
                    alert(response);
                    $state.html('An unknown error has occurred!');
                    $this.addClass('loginError');
                    $this.removeClass('ok loading');
                }
            });
        }, 5000);
    }

通過firefox的javascript調試器運行它后，我注意到ajax帖子從未真正運行過。 我正在使用C＃在Visual Studio中進行開發，並且在驗證用戶方法上放置了一個斷點，但從未遇到斷點。

任何幫助，將不勝感激。

編輯：這是我用來調用ValidateUser方法的HTML。

    <button onclick="ValidateUser()">
            <i class="spinner"></i>
            <span id="submit" class="state">Submit</span>
    </button>

Answer 1

如果按鈕正在提交表單，您將遇到問題。

沒有type="button"將提交-在某些瀏覽器中，如果沒有表單，則實際上會提交到頁面URL

你可能想要

$("#formID").on("submit",function (e) { 
  e.preventDefault(); 
  var userid = $("#Username").attr('value');....