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

阿鲁库玛尔CN

我对 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>
山姆

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

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

或者

侦听提交事件并防止默认行为,例如e.preventDefault(). 如何做到这一点在这里解释得很好

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

来自AJAX响应的jQuery中的调用函数

来自分类Dev

Spring MVC响应未在jQuery Ajax调用中加载

来自分类Dev

将属性添加到jQuery中的<input>每个循环仅在第一次通过时?

来自分类Dev

jQuery ajax发布仅在第一次有效

来自分类Dev

在Spring MVC中完成第一次交易后如何调用方法

来自分类Dev

在Spring MVC中完成第一次交易后如何调用方法

来自分类Dev

jQuery代码第一次有效,第二次仅在刷新页面后有效

来自分类Dev

页面加载后,第一次没有立即调用Ajax

来自分类Dev

Jquery从元素中删除属性(循环中)仅在第一次工作

来自分类Dev

Ajax 在第一次提交时不起作用,页面刷新后只有结果才会刷新

来自分类Dev

JSF Ajax 仅第一次调用

来自分类Dev

jQuery Ajax调用在IE中不起作用,JSON响应无法通过

来自分类Dev

从xml响应中获取一些数据来自ajax jquery调用

来自分类Dev

jQuery .submit不会被第一次调用

来自分类Dev

无法通过验证在jquery中单击第一次提交表单

来自分类Dev

jquery ajax在mvc 4中调用Web服务

来自分类Dev

jquery ajax在mvc 4中对Web服务的调用

来自分类Dev

JQuery 脚本中不返回 Spring MVC + AJAX 调用

来自分类Dev

jQuery函数仅在第一次按下提交按钮时调用控制器操作

来自分类Dev

json函数不通过使用jquery ajax mvc调用

来自分类Dev

AJAX JQuery表单提交仅一次(需要刷新页面)

来自分类Dev

从 AJAX 调用中删除响应

来自分类Dev

通过Grails中的AJAX调用刷新g:each标签

来自分类Dev

通过Grails中的AJAX调用刷新g:each标签

来自分类Dev

仅在第一次或刷新时加载Javascript

来自分类Dev

AJAX jQuery每5秒刷新一次div

来自分类Dev

.NET第一次成功后进行第二次Ajax调用

来自分类Dev

ajax发布调用不刷新我的控制器在mvc中的视图

来自分类Dev

AJAX jQuery调用未返回响应

Related 相关文章

  1. 1

    来自AJAX响应的jQuery中的调用函数

  2. 2

    Spring MVC响应未在jQuery Ajax调用中加载

  3. 3

    将属性添加到jQuery中的<input>每个循环仅在第一次通过时?

  4. 4

    jQuery ajax发布仅在第一次有效

  5. 5

    在Spring MVC中完成第一次交易后如何调用方法

  6. 6

    在Spring MVC中完成第一次交易后如何调用方法

  7. 7

    jQuery代码第一次有效,第二次仅在刷新页面后有效

  8. 8

    页面加载后,第一次没有立即调用Ajax

  9. 9

    Jquery从元素中删除属性(循环中)仅在第一次工作

  10. 10

    Ajax 在第一次提交时不起作用,页面刷新后只有结果才会刷新

  11. 11

    JSF Ajax 仅第一次调用

  12. 12

    jQuery Ajax调用在IE中不起作用,JSON响应无法通过

  13. 13

    从xml响应中获取一些数据来自ajax jquery调用

  14. 14

    jQuery .submit不会被第一次调用

  15. 15

    无法通过验证在jquery中单击第一次提交表单

  16. 16

    jquery ajax在mvc 4中调用Web服务

  17. 17

    jquery ajax在mvc 4中对Web服务的调用

  18. 18

    JQuery 脚本中不返回 Spring MVC + AJAX 调用

  19. 19

    jQuery函数仅在第一次按下提交按钮时调用控制器操作

  20. 20

    json函数不通过使用jquery ajax mvc调用

  21. 21

    AJAX JQuery表单提交仅一次(需要刷新页面)

  22. 22

    从 AJAX 调用中删除响应

  23. 23

    通过Grails中的AJAX调用刷新g:each标签

  24. 24

    通过Grails中的AJAX调用刷新g:each标签

  25. 25

    仅在第一次或刷新时加载Javascript

  26. 26

    AJAX jQuery每5秒刷新一次div

  27. 27

    .NET第一次成功后进行第二次Ajax调用

  28. 28

    ajax发布调用不刷新我的控制器在mvc中的视图

  29. 29

    AJAX jQuery调用未返回响应

热门标签

归档