Angular的Post 传递参数问题及解决方法

一、传递参数过程中POST会出问题,问题来源:
我们都知道向后台传参可以使用get、post,其形式类似于name=iyy&id=001 。但是在angular中却发现使用$http post 进行异步传输的过程中后台是接收不到数据的,其实这个问题就是因为请求头的缘故。在angular中默认的请求头是“Content-Type":"application/json",也就是说传递参数是使用json格式。但后台默认的却是Content-Type': 'application/x-www-form-urlencoded'。因此在这样的情况下后台接收到的数据就会是空的。

那么为什么使用get形式就可以传参呢?因为get这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果不是字符串,会被json序列化,可以理解为在get中参数的传递是直接追加在utl后面的,那么此时参数形式{“id”:"1","name":"yy"}会被转化成id=1&name=yy追加在url后面,后台就直接获取到了。

  1. Jquery、原生Ajax:
    头: Content-Type: application/x-www-form-urlencoded 传输数据 都认(经典所有服务器都认)

  2. Angular Js:
    application/json 新潮--部分服务器默认不支持

解决方法:
配置angularJs 库

配置AngularJs的POST方式
a. 修改请求头:

$http({
    url,
    method,
    data,
    headers:{ 'Content-Type':'application/x-www-form-urlencoded ' }
})

b: 修改传递内容:
transformRequest 传进去一个obj,返回一个编码编号

$http({
    transformRequest(obj){
        return  "要传输的字符串"
        //obj=>{a:"12", b:"5"}
        //return  "a=12&b=5"
       let att= [];
      for(let name in obj){
          arr.push(`$(name)=$(obj[name])`);
      }
      return arr.join('&');
    }
})

如把{a: 12, b:5 } =>"a=12&b=5"

c: 完整写法(一个完整写法、直接在module配置一次即可):

    var app = angular.module('app',[]);
  //方法,修改ng的请求头
        app.config(function($httpProvider){
            $httpProvider.defaults.transformRequest=function(obj){
                let arr =[];
                for(let name in obj){
                    arr.push(`${name}=${obj[name]}`);
                }
                return arr.join('&');
            };

            $httpProvider.defaults.headers.post['Content-Type']  = 'application/x-www-form-urlencoded';
        });
        app.controller('ctrl',function($scope,$resource,$q,$http){
            var defer = $q.defer();
            var promise = defer.promise;
            $http({
                method: "post",
                data:$.param({"id":"1","name":"jyy"}),
                url:"1.php"
            }).success(function(data){
                defer.resolve(data);
            });
            promise.then(function(data){
                $scope.data = data;
            })
        })

你可能感兴趣的:(Angular的Post 传递参数问题及解决方法)