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

Question

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

并添加了一个用于登录的 js 文件和一个具有 httpPost 类型的控制器。我的问题是当我单击登录按钮时它会转到登录 js 文件单击事件并执行对控制器的 ajax 调用和控制器 returns JSON 结果成功但是ajax 响应页面被刷新并执行了登录索引操作方法，另一件奇怪的事情是，如果我再次单击登录，那么 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>

Answer 1

看起来问题可能是按下的按钮触发了您的 java-脚本 "login()" 函数以及表单的 "submit" 事件（这是导致刷新）。您可以通过以下两种方式阻止刷新：

尝试更改按钮 html，将按钮类型从 "submit" 更改为 "button"

，这样它就不会引发提交事件

或

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

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

Page get refresh on ajax call response only on first time in mvc through jquery

.net

ajax

asp.net-mvc

jquery

asp.net-mvc-4