利用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

相關文章
相關標籤/搜索