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');....