1,POST请求
POST请求应该是一般项目用的最多的请求方式,这里的header分几种:
application/x-www-form-urlencoded
标准的编码格式,也是Jquery的Ajax请求默认方式,这种方式的好处就是浏览器都支持,在请求发送过程中会对数据进行序列化处理,以键值对形式?key1=value1&key2=value2的方式发送到服务器,如果用Jquery,它内部已经进行了处理,如果自己写原生的Ajax请求,就需要自己对数据进行序列化。
需要transformRequest。
transformRequest为函数或者函数数组,用来对http请求的请求体和头信息进行转换,并返回转换后的结果。
$http({ method:"POST", url:basePath+"/faInvestor/closeFAInvestor", data:{"investorId":Number(data),"isClose":Number(id)}, headers:{'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } }).then(function succses(response) { console.log("success") console.log(data+","+id) console.log(response) },function (response) { console.log("error") console.log(data+","+id) console.log(response) }) }
application/json
告诉服务器请求的主题内容是json格式的字符串,服务器端会对json字符串进行解析,这种方式的好处就是前端人员不需要关心数据结构的复杂度,只要是标准的json格式就能提交成功。
不需要transformRequest。
这里是先把数据封装成对象,然后使用 angular.toJson()转化为json数据。
$scope.jsonBody={ industryList:$scope.middleIndustryList, areaAList:$scope.middleCountryId, stageList:$scope.middleStageId, financingList:$scope.middleFinancingId, financingOutList:$scope.middlefinancingOutList, minRMBAmount:$scope.middleMinRMBAmount, maxRMBAmount:$scope.middleMaxRMBAmount, status:$scope.middleStatus, leaderId:'', currentPage:Number(page), pageSize:10, }
$http({ method:"POST", url:basePath+"/faInvestor/getFAInvestorList", data:angular.toJson($scope.jsonBody), headers:{'Content-Type': 'application/json;charset=UTF-8'} }).then(function (response) { console.log($scope.jsonBody) console.log(response.data) },function (response) { console.log("error") console.log($scope.jsonBody) }) }
undefined
用于文件上传,angular对于post和get请求默认的Content-Type是application/json。通过设置‘Content-Type’: undefined,这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data,还填充上当前的boundary,如果你手动设置为: ‘Content-Type’: multipart/form-data,后台会抛出异常:the current request boundary parameter is null。 通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化我们的formdata object.
angular.identity :函数返回本身的第一个参数。这个函数一般用于函数风格。
(可以将对象转成json数据,然后通过.append追加到form对象里,上传文件的同时,提交数据)
var form = new FormData(); var business = document.getElementById("business").files[0]; var finance = document.getElementById("finance").files[0]; var others = document.getElementById("others").files[0]; form.append('businessFile',business); form.append('financingFile',finance); form.append('otherFile',others); form.append('jsonStr',angular.toJson(infoData)); form.append('optType',1); console.log(form); $http({ method: 'POST', url: basePath+"/project/saveOrUpdateFAProject", data: form, headers: {'Content-Type': undefined}, transformRequest: angular.identity }).then(function success(response) { console.log(infoData) console.log(response.status) console.log(' upload success'); },function(response){ console.log(infoData) console.log(response) console.log(' upload fail'); })
2,GET请求
通过url发送请求:
可直接将参数追加到url里,无需设置headers。
$http({ method:"GET", url:basePath+"/area/getAreaByParentId?parentId="+$scope.countryId }).then(function succese(response) { console.log(response.data) })
3,JSONP请求
用于解决跨域的问题。
1,请求格式为XMLHttpRequest
2,ip或端口不一致
满足以上两点就会出现跨域问题,JSONP就是通过解决了请求格式,从而解决了跨域问题。
JSONP跨域请求的url后一定要追加参数callback,并且callback的值是固定的,即JSON_CALLBACK
$http({ method: 'JSONP', url: 'http://www.b.com/test.php?callback=JSON_CALLBACK' }).then(
function(response){ console.log(response); })
java服务端也需要加入跨域允许脚本:
response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods","POST"); response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8");