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

 
 

1、背景
因为近期工做须要将人脸识别功能与选课系统结合,可是对前端知识了解的不多,只能边作边学了,所以在这边把遇到的一些坑说明一下,但愿能帮助到像我同样的初学者前端

 
 

2、具体内容
这里采用框架为MVC,若是想在页面中不经过提交表单方式与控制器交互的话,能够用ajax去调用控制器方法并传递参数以及处理返回的json数据,方法以下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 = "帐号或密码错误!"});
    }   

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

在URL填写中为‘/控制器/方法名’这里必定要注意,控制器指的并非控制器全名,而是去掉controller的那个,这里个人控制器为UserController,所以这里填写User,话说我踩到这个坑,害我调试了很久。。。框架

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

接第二点,若是想要在一个ajax执行完成后再执行另一个,这里用 async: false便可,默认状况是为true的函数

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

关于返回数据,通常为json的须要解析一下url

相关文章
相关标签/搜索