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

最新在研究重构前端的项目,对比了当下主流的mv*型js框架,最终决定跳入angular的坑中,总结下在实际使用中遇到的一些问题以前解决方案。
在anjular中提供了http的服务对httprequest进行的封装,暴露出了类似jquer一样的get,post等简洁方法以供使用。
在项目开展过程中发现使用get请求的时候一切正常,但使用post请求的时候后端始终无法获取请求时传递的参数。项目中使用的后端语言是.net。
此时翻阅了后端的处理代码发现默认的请求参数头都是"application/x-www-form-urlencoded;charset=UTF-8";又翻阅了下angular的源码发现其post请求的头文件默认是以json的格式去传输的,致辞找到了问题的所在。
此处有二种解决方案一种是更改后端代码直接获取json对象去解析参数,但这并不是广大前端的工作,这里我们使用前端的方式去解决。
首先想到的是去更改angular中的默认配置:
 $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
发现这样并不能解决问题,后端依旧无法获取参数,参阅资料发现angular提供了transformRequest来手动更改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;
    }];

});

这里我们来分析一下transformRequest 在每次post请求发起的时候都会去执行,类似http的拦截服务。当我们的services发出以下一段post请求的时候:

  getTreeChilden: function (id) {

            return $.post(url, { "OrgID": id })
        },

代码执行片段

此处传入的data是一个对象形式的数据,会进行到第二步的执行我们会将这个对象再次处理;

代码执行片段

这里如果传入的对象数组大于1的时候会将query进行字符串进行拼接操作,将对象中key value 形式变化成类似于get请求时直接在url附带参数的形式。这样后端采用”application/x-www-form-urlencoded;charset=UTF-8”这种form形式的就可以获取我们post过去的对象了。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值