利用Ajax调用controller方法并传递参数

时间:2024-04-16 13:35:48

一、背景
由于近期工作需要将人脸识别功能与选课系统结合,但是对前端知识了解的很少,只能边做边学了,因此在这边把遇到的一些坑说明一下,希望能帮助到像我一样的初学者


二、具体内容
这里采用框架为MVC,如果想在页面中不通过提交表单方式与控制器交互的话,可以用ajax去调用控制器方法并传递参数以及处理返回的json数据,方法如下


页面代码:

 $.ajax(
    {
           url: \'/User/facelog\',     // 请求地址, 就是你的控制器, 如 test.com/home/index/index
           data: JSON.stringify({ stuID: stuID2 }),   // 需要传送的参数
           type: \'POST\',   // 请求方式
           dataType: \'json\', // 返回数据的格式, 通常为JSON
           contentType: \'application/json\',             
           success: function (result) {
               window.location.href = result.NextUrl;
               msg = result.Msg;
               console.log(result); // 请求成功后的回调函数, result 为响应内容
           },
           error: function () {
               console.log(\'Send Request Fail..\'); // 请求失败时的回调函数
           }
       }
   );
 [HttpPost]
 public JsonResult facelog(string  stuID)
    {
       User user = this.UserService.Select((User T) => (T.UserName == stuID) && T.Status == 0);
        if (user != null)
        {
            base.Session["UserInfo"] = user;
            AjaxMsg ajaxMsg = new AjaxMsg()
            {
                Statu = "ok",
                Msg = "登陆成功,正在跳转页面...",
                NextUrl = "/User/Main"
            };
            return base.Json(ajaxMsg);
        }
        return base.Json(new { Statu = "error", Msg = "账号或密码错误!"});
    }   

这里有几个坑需要特别说明一下:

在URL填写中为‘/控制器/方法名’这里一定要注意,控制器指的并不是控制器全名,而是去掉controller的那个,这里我的控制器为UserController,因此这里填写User,话说我踩到这个坑,害我调试了好久。。。

就是传递参数格式了,data这里传递的参数是动态的,因此就定义了全局变量存储,这里被坑的地方是stuID2 的值是从另外一个ajax请求中获得,但另外一个数据还未返回时这个ajax已经执行了,害我一直以为是data填的格式不对才导致数据无法传递到控制器中

接第二点,如果想要在一个ajax执行完成后再执行另外一个,这里用 async: false即可,默认情况是为true的

JSON.stringify 要与 contentType: \'application/json\' 一起用才能很好的将数据传递过去

关于返回数据,一般为json的需要解析一下