如何通过 Ajax 返回无效密码错误消息 - MVC

Question

我有登录页面，用户输入他们的电子邮件和密码，但是当他们输入错误的密码时，我想显示警报或文本，例如（您输入的密码无效）。我已经检查Checkpass不为空做一些事情，否则我不知道我应该做什么老实说。任何人都可以帮助我或指出我正确的方向！提前致谢：）控制器：    [HttpPost]    public JsonResult Login(string Mail, string pass)    {        var hashedPass = PasswordSecurity.PasswordStorage.CreateHash(pass);        using (DbNameSpace db = new DbNameSpace())        {            var query = from cbr in db.Contact_Business_Relation                        join c in db.Contact on cbr.Contact_No_ equals c.Company_No_                        join sa in db.Sales_Header on cbr.No_ equals sa.Sell_to_Customer_No_                        join px in db.PX2 on c.E_Mail equals px.Email_ID                        where c.E_Mail == Mail.ToLower()                        select new                        {                            Mail = c.E_Mail,                            pass = px.PS,                        };            var user = query.FirstOrDefault();            var CheckPass = PasswordSecurity.PasswordStorage.VerifyPassword(pass, user.pass);            if (user != null && CheckPass) //Checkpassword            {                Session["Email"] = user.Mail.ToString();            }     else {                // ??         }            return Json(user, JsonRequestBehavior.AllowGet);        }    }JavaScript：<script>    $(document).ready(function () {        $("#login").click(function (e) {            var email = $("input[name=Mail]").val();            var password = $("input[name=pass]").val();            e.preventDefault();            $.ajax({                type: "POST",                dataType: "json",                url: '@Url.Action("Login", "Account")',                data: { Mail: email, pass: password },                success: function (status) {                    if (status) {                        window.location.href = "/Account/Index";                    }                }            });        });    });</script>

Answer 1

看看这个 jquery 教程。我个人会使用 Fail 和 Done 回调方法。修改您的 c# 控制器以返回不同的 HTTP 状态代码。当他们传递一个好的用户名和密码时使用 HTTP 200。当他们传递错误的密码时使用 HTTP 400 这应该会触发 Fail() 回调并允许您警告失败。

https://learn.jquery.com/ajax/jquery-ajax-methods/

// Using the core $.ajax() method

$.ajax({

    // The URL for the request

    url: "post.php",

    // The data to send (will be converted to a query string)

    data: {

        id: 123

    },

    // Whether this is a POST or GET request

    type: "GET",

    // The type of data we expect back

    dataType : "json",

})

  // Code to run if the request succeeds (is done);

  // The response is passed to the function

  .done(function( json ) {

     $( "<h1>" ).text( json.title ).appendTo( "body" );

     $( "<div class=\"content\">").html( json.html ).appendTo( "body" );

  })

  // Code to run if the request fails; the raw request and

  // status codes are passed to the function

  .fail(function( xhr, status, errorThrown )** {

    alert( "Sorry, there was a problem!" );

    console.log( "Error: " + errorThrown );

    console.log( "Status: " + status );

    console.dir( xhr );

  })

  // Code to run regardless of success or failure;

  .always(function( xhr, status ) {

    alert( "The request is complete!" );

  });

Answer 2

这就是我最终存档如何返回无效密码错误消息的方式，也许它可以在当天帮助某人:)

我创建了一个enum来保存 MessageType 的值：

  public enum MessageType

    {

        Valid,

        InvalidEmail,

        InvalidUerNameAndPass,

    }

然后我更改我的控制器以获得不同的 MessageType：

    public JsonResult Login(string Mail, string pass)

    {

        MessageType messageType = MessageType.InvalidEmail;

        using (DbNamesapce db = new DbNamesapce())

        {

            var query = // do Join

                        select new

                        {

                            //Select Something

                        };

            var user = query.FirstOrDefault();

            if (user == null)

            {

                return Json(new { messageType = MessageType.InvalidEmail }, JsonRequestBehavior.AllowGet);

            }

            if (user != null && CheckPass)

            {

                messageType = MessageType.Valid;

            }

            else

            {

                messageType = MessageType.InvalidUerNameAndPass;

            }

            return Json(new { messageType = messageType }, JsonRequestBehavior.AllowGet);

        }

    }

我将脚本更改为：

<script>

    $(document).ready(function () {

        $("#login").click(function (e) {

            var email = $("input[name=Mail]").val();

            var password = $("input[name=pass]").val();

            e.preventDefault();

            $.ajax({

                type: "POST",

                dataType: "json",

                url: '@Url.Action("Login", "Account")',

                data: { Mail: email, pass: password },

                success: function (response) {

                    switch ($.trim(response.messageType))

                    {

                        case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.Valid)':

                            alert("Valid");

                            break;

                        case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.InvalidEmail)':

                             alert("InvalidUerNameAndPass");

                            break;

                       case '@Convert.ToInt32(YourNAmeSpace.Models.MessageType.InvalidUerNameAndPass)':

                            alert("InvalidUerNameAndPass");

                            break;

                    }

                }

            });

        });

    });

</script>

Answer 3

正常的做法是将响应状态设置为 401 并省略通常的数据负载，该数据负载将与成功响应一起发送。然后由客户端代码来识别错误状态并做出适当的响应（例如，可能通过显示警报并保留在名称/密码表单上）；此客户端行为将在$.ajax调用中指定。