利用Ajax调用controller方法并传递参数
一、背景
由于近期工作需要将人脸识别功能与选课系统结合,但是对前端知识了解的很少,只能边做边学了,因此在这边把遇到的一些坑说明一下,希望能帮助到像我一样的初学者
二、具体内容
这里采用框架为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的需要解析一下