AngularJs $http.post 數據后台獲取不到數據問題 的解決過程

   第一次使用 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;
        }
    ]);