Angularjs POST/GET/JSONP请求

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");