页面仅在第一次通过 jquery 在 mvc 中刷新 ajax 调用响应

Posted 2023-05-08

【中文标题】页面仅在第一次通过 jquery 在 mvc 中刷新 ajax 调用响应

【英文标题】：Page get refresh on ajax call response only on first time in mvc through jquery

【发布时间】：2019-02-23 07:20:12

【问题描述】：

我对 MVC 中的 json ajax 调用有疑问。我在那个用户名、密码和登录按钮中创建了一个登录表单

并添加了一个用于登录的 js 文件和一个 httpPost 类型的控制器。我的问题是当我单击登录按钮时，它会转到登录 js 文件单击事件并执行对控制器的 ajax 调用，控制器将 JSON 结果作为成功返回，但在 ajax 响应时，页面会刷新并执行登录索引action 方法和另一个奇怪的事情是，如果我再次单击登录，那么 ajax 调用响应正确地以 JSON(data.success) 的形式出现

谁能帮我解决一下！

脚本（通过按钮点击事件执行）：

    function login() 
    var errorLabel = $("#error");
    var email = $("#email").val();
   var password = $("#password").val();
   var rememberMe = $("#rememberMe:checked").length > 0;
   displayLoadingSpinner(true);
  displayLoginButton(false);
  if (email === "" || password === "") 
    errorLabel.text("Please fill all fields");
    errorLabel.show();
    displayLoadingSpinner(false);
    displayLoginButton(true);
    else 
    $.ajax(
        type: "POST",
        cache: false,
        url: "/Login/Login",
        data:  "username": email, "password": password, "rememberMe": 
               rememberMe ,
        success: function(data) 
            if (data.Success === true) 
                if (data.IsExistingUserRecurringPayment === true) 
                    window.location = "/dashboard";
             else 

                if (data.Message === "") 
                    errorLabel.text("Incorrect Username or Password");
                 else 
                    errorLabel.text(data.Message);
                    displayLoadingSpinner(false);
                    displayLoginButton(true);
                
                errorLabel.show();
            
        ,
        error: function() 
            errorLabel.text("Unable to validate given credentials");
            errorLabel.show();
            displayLoadingSpinner(false);
            displayLoginButton(true);
        
    );

 

控制器：

[HttpPost]
    public JsonResult Login(string username, string password, bool rememberMe = false)
    
        AssertHelper.AssertNotNull(username, "username");
        AssertHelper.AssertNotNull(password, "password");

        try
        
            var result = _authenticationService.Login(username, password, rememberMe);
            if (result.Success)
            
                Session["CurrentUser"] = CurrentUser;
                return Json(new  Success = true , "application/json", JsonRequestBehavior.AllowGet);
            
            else
            
                var errorMessage = string.IsNullOrEmpty(result.Message)
                    ? "Incorrect Username or Password"
                    : result.Message;
                return Json(new  Success = false, Message = errorMessage , "application/json", JsonRequestBehavior.AllowGet);
            
        
        catch (Exception ex)
        
            Elmah.ErrorSignal.FromCurrentContext().Raise(ex);
            return Json(new  Success = false, Message = ex.Message , "application/json", JsonRequestBehavior.AllowGet);
        
    

在视图中：

<form class="form_fields" onsubmit="return false;">
                        <div class="form-group">
                            <input type="text" class="form-control" id="txtUserName" placeholder="UserName">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="Password">
                        </div>
                        <p style="color: red; display: none" id="error"></p>
                        <button type="submit" class="btn_full btn_blue" id="btnLogin">Log in</button>
                        <div class="lds-ripple" style="display:none;"><div></div><div></div></div>
                        <div class="spinner" style="display: none;">
                            <div class="bounce1"></div>
                            <div class="bounce2"></div>
                            <div class="bounce3"></div>
                        </div>
                    </form>

【参考方案1】：

看起来问题可能是按下的按钮同时触发了您的 java 脚本“login()”函数以及表单的“提交”事件（这是导致刷新的原因）。这里有两种方法可以防止刷新：

尝试通过将按钮类型从“提交”更改为“按钮”来更改按钮 html，以便它不会导致提交事件

或者

监听提交事件并防止默认行为，例如e.preventDefault()。如何做到这一点解释得很好here