Обновление страницы при ответе на вызов ajax только в первый раз в mvc через jquery - PullRequest
Новая
       9

Обновление страницы при ответе на вызов ajax только в первый раз в mvc через jquery

0 голосов
/ 19 сентября 2018

У меня есть сомнения по поводу вызова json ajax в MVC.Я создал форму для входа в систему, в которой имя пользователя, пароль и кнопка входа

, и добавил файл js для входа в систему и контроллер с типом httpPost.В чем моя проблема, когда я нажимаю кнопку входа в систему, она переходит к событию click файла js входа в систему и выполняет вызов ajax к контроллеру, и контроллер возвращает результат JSON как успешный, но при ответе ajax страница обновляется и выполняет индекс входа в систему.Метод действия и еще одна странная вещь: если я снова нажму на логин, то ответ на вызов ajax будет корректно представлен в формате JSON (data.success)

Может кто-нибудь помочь мне разобраться!.

script (выполняется через событие нажатия кнопки): 

    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 Ответ

0 голосов
/ 19 сентября 2018

Похоже, проблема может заключаться в том, что нажатие кнопки вызывает как функцию java-скрипта «login ()», так и событие «submit» формы (что и вызывает обновление).Вот два способа предотвратить обновление:

Попробуйте изменить HTML-код кнопки, чтобы она не вызывала событие отправки, изменив тип кнопки с «отправить» на «кнопку»

Или

Прослушивание события отправки и предотвращение поведения по умолчанию, например, e.preventDefault().Как это сделать, хорошо объяснено здесь

...