$http、$resource序列化参数

前阵子因为项目需要，要将发送给后台的数据以formdata的数据形式发送给后台，查阅了很多资料找到了解决办法，跟大家分享一下。另外介绍一下$httpParamSerializerJQLike将数据格式化遵循jquery序列化规范的数据。

主要利用transformRequest对数据进行序列化，要注意一定要将Content-Type设置为undefined，这样浏览器才会自动帮你设置formdata的分隔符，自己设置会出错。有更好的解决办法也可在下面评论。

//http请求都在这里配置，put和delete是用resource插件，除了get，其他请求都默认用formdata的形式发送，可以在transformRequest重新定义处理函数
app.service('myHttp',['$http','$resource'
    ,function ($http,$resource) {
    //将参数序列化为formdata
    //注意formdata发送数据要求一定要将'Content-Type',设置为undefined，如headers:{'Content-Type':undefined}
     var setFormdata=function (data) {
         var myform=new FormData();
         //类型判断
         if(typeof data=="object") {
             angular.forEach(data, function (v, k) {
                 if(typeof v!="object"){
                     //不是对象就直接加入到formData
                     myform.append(k, v);//(参数名，参数值)
                 }else{
                     //如果是对象需将对象转换成字符串格式，多用于数组对象
                     myform.append(k, angular.toJson(v));
                 }
             });
         }
         return myform;
     };
  //下面使用setFormdata发送数据

        var httpR=$resource('/v1/admin/:mytype/:id', {mytype:'@mytype',id:'@id'}, {
            remove: { method: "DELETE",headers:{'Content-Type':undefined},transformRequest:function (data) {
                return setFormdata(data);
            }},
            update: { method: "PUT",headers:{'Content-Type':undefined},transformRequest:function (data) {
                return setFormdata(data);
            }}

        });

        /*post请求*/
        self.httpPost=function (obj) {
            def.config={
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: function (data) {
                    return setFormdata(data);
                }
            };
            obj=angular.extend(def,obj);
            $http.post(obj.url,obj.data,obj.config).success(function (data) {
                console.log(data);
            }).error(function (data) {
                console.log(data,obj);
            });
        };
        self.resUpdate=function (obj) {
            httpR.update(obj.data,obj.config,function (data) {
                console.log(data);
            },function (data) {
                console.log(data,obj);
            })
        };
        self.resDelete=function (obj) {
            httpR.remove(obj.data,obj.config,function (data) {
                console.log(data);
            },function (data) {
                console.log(data,obj);
            });
        };

    }]);

上面介绍序列化为formdata，下面介绍另外一个序列化服务‘$httpParamSerializerJQLike’，该服务支持angular1.4.0以上。

$httpParamSerializerJQLike能将http发送的数据序列化成遵循jquery序列化规范的格式。使用起来很简单。

transformRequest: function (data) {
    var newdata = $httpParamSerializerJQLike(data);
    return newdata
}

有好的建议和意见欢迎大家在评论区留下评论。

’