angualr http post后端无法获取数据解决方案

来源：互联网发布：stc51单片机里边是什么编辑：程序博客网时间：2024/05/16 17:12

 初次使用AngularJS开发项目;项目构建当中踩了不少坑，拿出来总结一下，今天我们来说说实际开发中遇到的坑爹问题. AngularJS原生提供了很完善的http服务包括了一些像$q,promise这种高大上的东西,但是实际使用中遇到了个奇怪的问题,当使用get请求的时候一切正常,但是使用post像后台提交数据的时候,后台取到的数据是null,翻看了一下后台默认处理前台的http请求的头文件都是['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';但是anjular中的http服务都是以json格式去提交的这就导致的所有带参数的post请求后端都无法正确的解析参数。 首先想到的就是更改Angular中的配置文件

   $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

发现这样并不能解决问题如果传入的数据是这种格式的我们还需要在进行处理一次：

 getTreeChilden: function (id) {            return $.post(url, { "OrgID": id })        };  httpProvider.defaults.transformRequest = [function (data) {        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;    }];

var param = function (obj) {        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;        for (name in obj) {            value = obj[name];            if (value instanceof Array) {                for (i = 0; i < value.length; ++i) {                    subValue = value[i];                    fullSubName = name + '[' + i + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            }            else if (value instanceof Object) {                for (subName in value) {                    subValue = value[subName];                    fullSubName = name + '[' + subName + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            }            else if (value !== undefined && value !== null)                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';        }        return query.length ? query.substr(0, query.length - 1) : query;    };

我们来分析下整个过程; 当我们传入的是个json对象,它会去执行transformRequest去转换我们的post数据格式。
这里写图片描述

然后再去将这种对象格式的数据拼接转换成类似get一样的url传参的形式；来具体看下运行过程：
这里写图片描述

这样就可以解决后端获取不了anjular post提交数据的问题。以下放上所有完整代码片段：

var routerApp = angular.module('routerApp', ['ui.router'], function ($httpProvider) {    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';    var param = function (obj) {        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;        for (name in obj) {            value = obj[name];            if (value instanceof Array) {                for (i = 0; i < value.length; ++i) {                    subValue = value[i];                    fullSubName = name + '[' + i + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            }            else if (value instanceof Object) {                for (subName in value) {                    subValue = value[subName];                    fullSubName = name + '[' + subName + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            }            else if (value !== undefined && value !== null)                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';        }        return query.length ? query.substr(0, query.length - 1) : query;    };    $httpProvider.defaults.transformRequest = [function (data) {        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;    }];});

0 0