Javascript 如何防止从表单多次发送登录请求

在我的登录表单中我有这样一种方法：

     [HttpPost]
        [ValidateAntiForgeryToken]
        [AllowAnonymous]
        public async Task<ActionResult> Login(LoginModel model, string returnUrl)
{

var result = await _applicationSignInManager.PasswordSignInAsyncResponse(someParamshereToPass);

// ... 
}

$('#ButtonToTriggerId').click(function(){ $(this).prop('disabled',true)});

$('#ButtonToTriggerId').click(function(){
   $(this).prop('disabled',true);
   $.ajax({//call jQuery ajax
       type: 'Post',//Your ActionResult HttpMethod
       url:  '@Url.Action("Login","ControllerName")/?returnUrl='+"%2F",//send the return URl to the ActionResult Mehod
       data: JSON.stringify($('#myForm')),//send the form to the ActionResult  Method
       done: function(){
           $('#ButtonToTriggerId').prop('disabled',false);//enable when the ajax request ends
       }

    })
});

[HttpPost]
[ValidateAntiForgeryToken]
[异名]
公共异步任务登录（LoginModel模型，字符串返回URL）
{
var result=wait_应用程序SignInManager.PasswordSignInAsynResponse（someParamshereToPass）；
// ... 
}

问题是，当进行登录检查需要时间时，用户可以双击submit按钮并再次调用此方法，尽管用户现在已通过身份验证，但它将尝试为其创建另一个令牌，这将导致以下崩溃：

提供的防伪令牌用于不同的基于索赔的应用程序 用户比当前用户多

我做了查找答案以防止双击表单，但无法让表单正常工作，大多数解决方案是禁用按钮！那么，如果他们输入了错误的密码，如何启用它呢！！还有一些是我不知道如何使用的

Ajax

---

因此，理想情况下，我正在寻找一个服务器端解决方案，如果不是，那么就是一个

JS

解决方案。如果没有，那么确定一个

Ajax

解决方案

您可以使用jQuery禁用单击按钮，如下所示：

     [HttpPost]
        [ValidateAntiForgeryToken]
        [AllowAnonymous]
        public async Task<ActionResult> Login(LoginModel model, string returnUrl)
{

var result = await _applicationSignInManager.PasswordSignInAsyncResponse(someParamshereToPass);

// ... 
}

$('#ButtonToTriggerId').click(function(){ $(this).prop('disabled',true)});

$('#ButtonToTriggerId').click(function(){
   $(this).prop('disabled',true);
   $.ajax({//call jQuery ajax
       type: 'Post',//Your ActionResult HttpMethod
       url:  '@Url.Action("Login","ControllerName")/?returnUrl='+"%2F",//send the return URl to the ActionResult Mehod
       data: JSON.stringify($('#myForm')),//send the form to the ActionResult  Method
       done: function(){
           $('#ButtonToTriggerId').prop('disabled',false);//enable when the ajax request ends
       }

    })
});

但正确的方法是创建一个进度条或加载gif来“保留”用户

如果您使用的是JQuery ajax，您可以这样做：

     [HttpPost]
        [ValidateAntiForgeryToken]
        [AllowAnonymous]
        public async Task<ActionResult> Login(LoginModel model, string returnUrl)
{

var result = await _applicationSignInManager.PasswordSignInAsyncResponse(someParamshereToPass);

// ... 
}

$('#ButtonToTriggerId').click(function(){ $(this).prop('disabled',true)});

$('#ButtonToTriggerId').click(function(){
   $(this).prop('disabled',true);
   $.ajax({//call jQuery ajax
       type: 'Post',//Your ActionResult HttpMethod
       url:  '@Url.Action("Login","ControllerName")/?returnUrl='+"%2F",//send the return URl to the ActionResult Mehod
       data: JSON.stringify($('#myForm')),//send the form to the ActionResult  Method
       done: function(){
           $('#ButtonToTriggerId').prop('disabled',false);//enable when the ajax request ends
       }

    })
});

---

单击按钮后，可以禁用该按钮

唯一的问题是，如果您使用ASP.Net MVC客户端验证，您希望仅在客户端验证成功后禁用它否则，如果用户在没有输入任何内容的情况下单击按钮，按钮将被永久禁用

@使用（Html.BeginForm（“登录”、“帐户”，
新建{ReturnUrl=ViewBag.ReturnUrl}，
FormMethod.Post，新的{role=“form”，autocomplete=“off”}）
{
@Html.AntiForgeryToken（）
...
登录
}
$（函数（）{
$（“表单”）.data（“验证器”）.settings.submitHandler=函数（表单）{
$（“#btnSubmit”）.html（“登录…”）.prop（'disabled'，true）；
表单提交（）；
};
});

---

当请求正在进行时，使用javascript禁用按钮。当响应需要时启用（例如：登录失败）。此外（引导+挂起方法），您可以在脚本中设置一个标志，例如

processing=false

。发送请求后，将其设置为

true

，当

处理

为

true

时，不要发出AJAX请求。（然后您可以根据需要重置为

false

，例如登录失败）@Shyju您可以为它发布一些代码吗？我不知道该怎么做。但听起来是个好办法。谢谢特别是当你说请求正在进行中时。。我怎么知道？怎么把它设置回启用状态？假设他们输入了错误的用户/通行证，现在他们想重新输入并提交？如何将其设置回启用状态？假设他们输入了一个错误的用户/通行证，现在他们想重新输入并提交？这将启用它，因为它是完整的页面提交。在登录页面中使用Ajax没有任何意义，因为99%的时间只有回发一次，除非用户胖指表单。哦，哇，非常感谢，很好地完成了开箱即用。很不错的。再次感谢。星期五快乐：）