jquery $ .ajax多次发布（每次后续提交后多发一次）
在我忘记的密码表单上，jquery ajaxpost被多次激活（每次提交后再激活一次）。 因此，如果用户输入无效的电子邮件3次，然后输入有效的电子邮件，则用户将获得4封密码更改的电子邮件。 似乎事件在每次抛出错误时都会堆叠，并且所有这些都会在下次提交时被触发。 这是我所有相关的代码。 我究竟做错了什么？
JS
RetrievePassword = function () { var $popup = $("#fancybox-outer"); var form = $popup.find("form"); form.submit(function (e) { var data = form.serialize(); var url = form.attr('action'); $.ajax({ type: "POST", url: url, data: data, dataType: "json", success: function (response) { ShowMessageBar(response.Message); $.fancybox.close() }, error: function (xhr, status, error) { ShowMessageBar(xhr.statusText); } }); return false; }); }; MVC控制器/动作
[HandlerErrorWithAjaxFilter, HttpPost] public ActionResult RetrievePassword(string email) { User user = _userRepository.GetByEmail(email); if (user == null) throw new ClientException("The email you entered does not exist in our system. Please enter the email address you used to sign up."); string randomString = SecurityHelper.GenerateRandomString(); user.Password = SecurityHelper.GetMD5Bytes(randomString); _userRepository.Save(); EmailHelper.SendPasswordByEmail(randomString); if (Request.IsAjaxRequest()) return Json(new JsonAuth { Success = true, Message = "Your password was reset successfully. We've emailed you your new password.", ReturnUrl = "/Home/" }); else return View(); }
HandlerErrorWithAjaxFilter
public class HandleErrorWithAjaxFilter : HandleErrorAttribute { public bool ShowStackTraceIfNotDebug { get; set; } public string ErrorMessage { get; set; } public override void OnException(ExceptionContext filterContext) { if (filterContext.HttpContext.Request.IsAjaxRequest()) { var content = ShowStackTraceIfNotDebug || filterContext.HttpContext.IsDebuggingEnabled ? filterContext.Exception.StackTrace : string.Empty; filterContext.Result = new ContentResult { ContentType = "text/plain", Content = content }; string message = string.Empty; if (!filterContext.Controller.ViewData.ModelState.IsValid) message = GetModeStateErrorMessage(filterContext); else if (filterContext.Exception is ClientException) message = filterContext.Exception.Message.Replace("\r", " ").Replace("\n", " "); else if (!string.IsNullOrEmpty(ErrorMessage)) message = ErrorMessage; else message = "An error occured while attemting to perform the last action. Sorry for the inconvenience."; filterContext.HttpContext.Response.Status = "500 " + message; filterContext.ExceptionHandled = true; filterContext.HttpContext.Response.TrySkipIisCustomErrors = true; } else { base.OnException(filterContext); } } private string GetModeStateErrorMessage(ExceptionContext filterContext) { string errorMessage = string.Empty; foreach (var key in filterContext.Controller.ViewData.ModelState.Keys) { var error = filterContext.Controller.ViewData.ModelState[key].Errors.FirstOrDefault(); if (error != null) { if (string.IsNullOrEmpty(errorMessage)) errorMessage = error.ErrorMessage; else errorMessage = string.Format("{0}, {1}", errorMessage, error.ErrorMessage); } } return errorMessage; } }
这里有更多的JS。 我正在使用fancybox插件作为我的灯箱。 “检索密码”链接位于登录灯箱中。
$(document).ready(function () { $(".login").fancybox({ 'hideOnContentClick': false, 'titleShow': false, 'onComplete': function () { $("#signup").fancybox({ 'hideOnContentClick': false, 'titleShow':false, 'onComplete': function () { } }); $("#retrievepassword").fancybox({ 'hideOnContentClick': false, 'titleShow': false, 'onComplete': function () { } }); } }); });
我不是jQuery专家，但在我看来，每次fancybox onComplete都会触发，你将（另一个）事件处理程序添加到#retrievepassword和#signup ……我错过了页面中其余的html，所以我不知道是否/何时加载了登录对话框内容，但以下内容可能会更好：
$(document).ready(function () { $(".login").fancybox({ 'hideOnContentClick': false, 'titleShow': false, 'onComplete': function () { } }); $("#signup").fancybox({ 'hideOnContentClick': false, 'titleShow':false, 'onComplete': function () { } }); $("#retrievepassword").fancybox({ 'hideOnContentClick': false, 'titleShow': false, 'onComplete': function () { } }); });