溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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請求的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
