$http是AngularJS中的一个与后端进行交互的服务，以下记录了$http的一些基本使用方式：
测试用的后端接口：
@RestController
public class UserController {
@GetMapping("/users")
public User testGet(User user){
return user;
}
@PostMapping("/users/sendJson")
public User testJson(@RequestBody User user){
return user;
}
@PostMapping("/users")
public User testFileUpload(User user, @RequestParam(name = "portrait",required = false)MultipartFile portrait)
throws Exception {
if(user == null || portrait == null || portrait.isEmpty()){
return user;
}
String fileName = portrait.getOriginalFilename();
int size = (int) portrait.getSize();
System.out.println("文件名："+fileName + "；文件大小：" + size);
//获取根目录
String destPath = "/static/savedPic/" + fileName;
File rootPath = new File(ResourceUtils.getURL("classpath:").getPath());
File dest = new File(rootPath, destPath);
if(!dest.getParentFile().exists()){
dest.getParentFile().mkdirs();
}
portrait.transferTo(dest);
user.setPortraitUrl(destPath);
return user;
}
}测试用的前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS的$http基本使用</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="HttpApp" ng-controller="HttpController">
<form ng-submit="testGet()">
<div><label>名称：</label><input ng-model="name" type="text"></div>
<div><label>年龄：</label><input ng-model="age" type="text"></div>
<div>
<label>爱好：</label>
<input ng-model="sleep" type="checkbox" ng-true-value="'sleep'" ><label>睡觉</label>
<input ng-model="eat" type="checkbox" ng-true-value="'eat'" ><label>吃饭</label>
<input ng-model="play" type="checkbox" ng-true-value="'play'" ><label>玩耍</label>
</div>
<div>头像：<input onchange='angular.element(this).scope().portraitChanged(this)' type="file"></div>
<button type="submit">提交</button>
</form>
</div>
</body>
</html>使用$http发送简单GET请求：
<script>
var app = angular.module('HttpApp', []);
app.controller('HttpController', function($scope, $http) {
//get请求测试
$scope.testGet = function(){
$scope.hobbies = [];
if($scope.sleep){
$scope.hobbies.push($scope.sleep);
}
if($scope.eat){
$scope.hobbies.push($scope.eat);
}
if($scope.play){
$scope.hobbies.push($scope.eat);
}
console.log($scope.age);
console.log($scope.name);
console.log($scope.hobbies);
$http.get('/users',
{
params:{
age: $scope.age,
name: $scope.name,
hobbies: $scope.hobbies
}
}).then(function (response) {
console.log(response.data);
});
};
});
</script>使用$http上传文件，这里请求添加头部’Content-Type’:undefined，浏览器将自动为我们设置正确的Content-Type:multipart/form-data,同时填充合适的boundary：
$scope.portraitChanged = function(portraitInput){
$scope.portrait = portraitInput.files[0];
};
$scope.testUpload = function(){
$scope.hobbies = [];
if($scope.sleep){
$scope.hobbies.push($scope.sleep);
}
if($scope.eat){
$scope.hobbies.push($scope.eat);
}
if($scope.play){
$scope.hobbies.push($scope.eat);
}
console.log($scope.age);
console.log($scope.name);
console.log($scope.hobbies);
var fd = new FormData();
if($scope.age) {
fd.append("age", $scope.age);
}
if($scope.name) {
fd.append("name", $scope.name);
}
fd.append("hobbies",$scope.hobbies);
if($scope.portrait) {
fd.append("portrait", $scope.portrait);
}
$http({
method: 'POST',
url: '/users',
data: fd,
headers: {'Content-Type':undefined},
transformRequest: angular.identity}).
then(function (response) {
console.log(response.data);
});
};以JSON参数方式进行POST提交，同时后端使用@RequestBody注解来接收参数：
$scope.testJson = function(){
$scope.hobbies = [];
if($scope.sleep){
$scope.hobbies.push($scope.sleep);
}
if($scope.eat){
$scope.hobbies.push($scope.eat);
}
if($scope.play){
$scope.hobbies.push($scope.eat);
}
console.log($scope.age);
console.log($scope.name);
console.log($scope.hobbies);
var params = {};
params.age = $scope.age;
params.name = $scope.name;
params.hobbies = $scope.hobbies;
$http.post('/users/sendJson',
params).
then(function (response) {
console.log(response.data);
});
};以application/x-www-form-urlencoded方式进行POST提交：
$scope.testXXX = function(){
$scope.hobbies = [];
if($scope.sleep){
$scope.hobbies.push($scope.sleep);
}
if($scope.eat){
$scope.hobbies.push($scope.eat);
}
if($scope.play){
$scope.hobbies.push($scope.eat);
}
console.log($scope.age);
console.log($scope.name);
console.log($scope.hobbies);
var params = {};
params.age = $scope.age;
params.name = $scope.name;
params.hobbies = $scope.hobbies;
console.log($.param(params,true));
$http(
{
method: "POST",
url:'/users',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
data: $.param(params,true)
}).
then(function (response) {
console.log(response.data);
});
};