利用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的需要解析一下


 





            

            
        

	    
	    
    


相关文章