AngularJs $http.post 資料後台擷取不到資料問題 的解決過程

標籤：log   urlencode   wss   str   content   解決   har   transform   ide   

   第一次使用 AngularJs 的 $http 模組的時候，遇到過後台擷取不到前台提交資料的問題，檢查代碼沒有發現問題，先上代碼。

  js 代碼

angular.module("newsApp", [])    .constant("newsInfoUrl", "/WebPage/Page/NewsInfo/")    .factory("newsService", function($http) {        return {            getNewsList: function (categoryId, callBack) {                //請求後台資料                 $http.post("/WebPage/Page/GetNewsList",                    //參數分類ID，後台擷取不到                    { id: categoryId }                    ).then(function (resp) {                    callBack(resp);                });            }         }    })     .controller("newsListCtrl", [        "$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {            $scope.cId = "";            var getNewsList = function() {                newService.getNewsList($scope.cId, function(resp) {                    $scope.newsList = resp.data;                });            }            $scope.newsInfoUrl = newsInfoUrl;            $scope.reload = getNewsList;        }    ]);    

後台代碼

        [HttpPost]        public JsonResult GetNewsList(FormCollection collection)        { 
　　　　　　　//在這裡 collection 裡面沒有資料            var catrgoryId = collection["id"];            var page = new PageContext            {                PageSize = 20            };            var cList = new ContentBusiness().GetContentList(string.Empty, catrgoryId, page);            return Json(ConvertModel(cList));        }

奇怪了，難道提交資料有問題？抓包看看

 

原來問題出在這裡，我們平時用 jquery post 提交資料是以 form-data 的形式提交的，而 AngularJs 以 json 格式提交的，所以後台擷取不到了。

問題找到了，解決就容易了。

 

解決方案 <一>  改後台，以參數的形式接收，不使用 FormCollection 或 Request.Form[]

        [HttpPost]        public JsonResult GetNewsList(string id)        {             var page = new PageContext            {                PageSize = 20            };            var cList = new ContentBusiness().GetContentList(string.Empty, id, page);            return Json(ConvertModel(cList));        }

如果參數比較多，可以定義一個model對象，model對象的屬性對應前台提交的參數，以model對象作為後台回應程式法的參數。

解決方案 <二>  改AngularJs 提交資料的方式，使用 全域配置 配置$httpProvider 的 header 值，使用 transformRequest

　　　　　　　　　　對提交資料進行序列化，把 json 對象更改為字串。

     angular.module("newsApp", [])     .config(["$httpProvider", function ($httpProvider) {
　　　　　//更改 Content-Type         $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";         $httpProvider.defaults.headers.post["Accept"] = "*/*";         $httpProvider.defaults.transformRequest = function (data) {              //把JSON資料轉換成字串形式             if (data !== undefined) {                  return $.param(data);             }             return data;         };     }])    .constant("newsInfoUrl", "/WebPage/Page/NewsInfo/")    .factory("newsService", function ($http) {        return {            getNewsList: function (categoryId, callBack) {                $http.post("/WebPage/Page/GetNewsList",                     {id: categoryId}                ).then(function (resp) {                    callBack(resp);                });            }        }    })        .controller("newsListCtrl", [        "$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {            $scope.cId = "";            var getNewsList = function() {                newService.getNewsList($scope.cId, function(resp) {                    $scope.newsList = resp.data;                });            }            $scope.newsInfoUrl = newsInfoUrl;            $scope.reload = getNewsList;        }    ]);    

 

AngularJs $http.post 資料後台擷取不到資料問題 的解決過程