使用AngularJS怎么发送异步Get和Post请求？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller
计算
安全
数据库
网络和加速
企业服务
<body ng-app="MyApp" ng-controller="MyCtrl" >
...
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>2、添加必要的控件并绑定相应的事件
get:<input type="text" ng-model="param">{{param}} <br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
<button ng-click="get()">Get</button>
<button ng-click="post()">Post</button>3、在JS脚本中发送进行Get/Post请求
get
$scope.get = function () {
$http.get("/get", {params: {param: $scope.param}})
.success(function (data, header, config, status) {
console.log(data);
})
.error(function (data, header, config, status) {
console.log(data);
})
;
}get 将参数放在URL中
$scope.get = function () {
$http.get("/get?param="+$scope.param)
.success(function (data, header, config, status) {
console.log(data);
})
.error(function (data, header, config, status) {
console.log(data);
})
;
}post
$scope.post = function () {
$http.post("/post", $scope.user)
.success(function (data, header, config, status) {
console.log(data);
})
.error(function (data, header, config, status) {
console.log(data);
})
;
}4、由Controller处理请求并返回结果
get
@RequestMapping("/get")
@ResponseBody
public Map<String,String> get(String param) {
System.out.println("param："+param);
response.put("state", "success");//将数据放在Map对象中
return response;
}post
@RequestMapping("/post2")
@ResponseBody
public void post2(@RequestBody User user, HttpServletResponse resp) {
//返回不同的http状态
if(user.getName()!=null&&!user.getName().equals("")){
resp.setStatus(200);
}
else{
resp.setStatus(300);
}
}如果需要配置请求头部
$http({
method : "POST",
url : "/post",
data : $scope.user
}).success(function(data, header, config, status) {
console.log(data);
}).error(function(data, header, config, status) {
console.log(data);
});5、由JS http请求的回调函数处理并执行下一步操作
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Request</title>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl" >
get:<input type="text" ng-model="param"><br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
<button ng-click="get()">Get</button>
<button ng-click="post()">Post</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>
</html>sbt.js
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function ($scope, $http) {
$scope.get = function () {
$http.get("/get", {params: {param: $scope.param}})
.success(function (data, header, config, status) {
console.log(data);
})
.error(function (response) {
console.log(response);
})
;
}
$scope.post = function () {
$http.post("/post", $scope.user)
.success(function (data, header, config, status) {
console.log(data);
})
.error(function (data, header, config, status) {
console.log(data);
})
;
}
});看完上述内容，你们掌握使用AngularJS怎么发送异步Get和Post请求的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
