时间戳

首页 > 解决方案 > 对 ASP.NET MVC 控制器的 jQuery Ajax 请求成功后如何运行 JavaScript 函数？

javascript - 对 ASP.NET MVC 控制器的 jQuery Ajax 请求成功后如何运行 JavaScript 函数？

问题描述

我正在开发一个具有登录/注册功能的简单网站。我只是想让用户在成功登录或注册后收到一条消息。

这是我的登录方法

控制器 ：

[HttpPost]
    public ActionResult Login(string username,string password)
    {
        User loginTest = DB.Users.Where(a => a.User_Name.Equals(username) && a.User_Password.Equals(password)).FirstOrDefault();
        if (loginTest != null)
        {


            //some code
        }
        else
        {
            return Redirect(Request.UrlReferrer.ToString());
        }
    }

我正在调用这样的登录方法

 @using (Ajax.BeginForm("Login", "Home", new AjaxOptions() { UpdateTargetId = "logged-in", InsertionMode = InsertionMode.Replace }))
                        {
                         <input type="text" />
                         <input type="password" />
                         <input type="submit" value="login">
                         }

如果登录成功，这是我想要运行的 javascript 函数。

  <script type="text/javascript">
    function JSalert(){
swal("Logged in successfully");
     }
  </script>

我已经加了 

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

而且我在按钮单击时测试了该功能并且它正在工作，我对此只是新手，我想知道如何在用户登录后调用此功能。

我已经检查了这些链接，但我无法获得任何帮助。

ajax成功后调用javascript函数

回发后运行javascript函数

谢谢。

标签： javascriptc#jqueryajaxasp.net-mvc

解决方案

欢迎来到堆栈溢出。您不必使用该Ajax.BeginForm。您可以编写一些纯 HTML。

<form>
    <input type="text" id="username" placeholder="login">
    <input type="text" id="password" placeholder="password">
    <input type="button" value="Log In" id="postIt">
</form>

为了进行 Ajax 调用，将一些 JavaScript/jQuery 代码添加到同一个 cshtml 文件中。

<script>
$("#postIt").click(function() {
    postIt();
});
function postIt() {
    var usr = $("#username").val();
    var pwd = $("#password").val();
    $.ajax({
        type: "POST",
        url: "/Login/LogMeIn",
        data: { "Username": usr, "Password": pwd },
        success: function(data) {
            if (data.result) {// logged in
                JSalert(data.result);
            } else {// unauthorized
                JSalert(data.result);
            }
        }
    });
}
function JSalert(msgType) {
    if (msgType) {
        swal("Logged in successfully", "Welcome to StackOverflow", "success");
    } else {
        swal("You're not authorized", "Welcome to StackOverflow", "error");  
    }
}
</script>

然后，在控制器中添加一个简单的登录方法。

[HttpPost]
public JsonResult LogMeIn(LoginModel data)
{
    if (data.Username == "rightUser" && data.Password == "rightPass")
    {
        return Json(new { result = true, message = "welcome" });
    }
    return Json(new { result = false, message = "unauthorized" });
}

登录模型.cs

public class LoginModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

推荐阅读