配色: 字号:
让AngularJS的$http 服务像jQuery
2016-09-09 | 阅:  转:  |  分享 
  
让AngularJS的$http服务像jQuery.ajax()一样工作

$http的post.请求默认的content-Type=application/json.提交的是json对象的字符串化数据,.后端无法从post中获取,.跨域请求是复杂请求,会发送OPTIONS的验证请求,成功后才真正发起post请求

jQuery.post.使用的是content-Type=application/x-www-form-urlencoded-.提交的是formdata,.后端可以从post中获取,.简单跨域请求,直接发送

解决办法有两个:

1.是后端支持复杂的跨域请求那么后端就需要设置如下的信息

defoptions(self):

self.set_header(''Access-Control-Allow-Methods'',''POST,GET,OPTIONS'')

self.set_header(''Access-Control-Max-Age'',86400)

self.set_header(''Access-Control-Allow-Headers'',''Origin,X-Requested-With,Content-Type,Accept'')

self.write('''')

后端post中拿不到数据,我们需要自己处理request的body,看看python和php的处理方式:python

#这种写法支持多种content-Type提交

defPOST(self):

ifself.request.headers[''Content-Type''].find(''application/json'')>=0:

body=self.request.body

ifbody:

returnjson.loads(body.decode())

else:

return{}

else:

paras={}

fork,vinself.request.body_arguments.items():

paras[k]=v[-1].decode()

returnparas

php


$params=json_decode(file_get_contents(''php://input''));

?>

2.配置AngularJS配置$http服务的默认content-Type=application/x-www-form-urlencoded,如果是指配置这个的话,虽然提交的content-Type改了,但是提交的数据依然是个json字符串,不是我们想要的formdata形式的键值对,需要实现param方法.Talkischeap,ishowyouthecode.

angular.module(''MyModule'',[www.visa158.com],function($httpProvider){

//Usex-www-form-urlencodedContent-Type

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



/

Theworkhorse;convertsanobjecttox-www-form-urlencodedserialization.

@param{Object}obj

@return{String}

/

varparam=function(obj){

varquery='''',

name,value,fullSubName,subName,subValue,innerObj,i;



for(nameinobj){

value=obj[name];



if(valueinstanceofArray){

for(i=0;i
subValue=value[i];

fullSubName=name+''[''+i+'']'';

innerObj={www.hunanwang.net};

innerObj[fullSubName]=subValue;

query+=param(innerObj)+''&'';

}

}elseif(valueinstanceofObject){

for(subNameinvalue){

subValue=value[subName];

fullSubName=name+''[''+subName+'']'';

innerObj={};

innerObj[fullSubName]=subValue;

query+=param(innerObj)+''&'';

}

}elseif(value!==undefined&&value!==null)

query+=encodeURIComponent(name)+''=''+encodeURIComponent(value)+''&'';

}



returnquery.length?query.substr(0,query.length-1):query;

};



//一个function数组,负责将请求的body,也就是postdata,转换成想要的形式

//Override$httpservice''sdefaulttransformRequest

$httpProvider.defaults.transformRequest=[function(data){

returnangular.isObject(data)&&String(data)!==''[objectFile]''?param(data):data;

}];

});

配合一点$resource的API参考,这个代码就好懂了:

Note:上述param方法定义的地方不要使用jQuery.param方法,因为jQuery.param方法会将要处理的对象上的function全执行一边,把返回的值当做参数的值,这是我们不期望的,我们写的这个param方法也是为了解决上面说的content-Type=x-www-form-urlencoded,但是提交的数据依然是json串的问题。



献花(0)
+1
(本文系白狐一梦首藏)