AnglarJS送信非同期Get/Post要求方法
1、ページにAnglarJSを入れて、ページにリンクするng-apとng-controller
get
get
HTML
<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);
})
;
}
ベスト
$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;
}
ベスト
@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);
})
;
}
});
以上のAnglarJSは非同期Get/Postの要求方法を発送しました。つまり、小編集は皆さんに全部の内容を共有しました。参考にしてもらいたいです。皆さんもよろしくお願いします。