快捷導(dǎo)航

AngularJS發(fā)送異步Get/Post請(qǐng)求方法

更新時(shí)間：2018年08月13日 10:57:53 作者：?jiǎn)鑶鑶枥怖怖?

今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、在頁(yè)面中加入AngularJS并為頁(yè)面綁定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、添加必要的控件并綁定相應(yīng)的事件

 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腳本中發(fā)送進(jìn)行Get/Post請(qǐng)求

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 將參數(shù)放在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處理請(qǐng)求并返回結(jié)果

get

@RequestMapping("/get")
 @ResponseBody
 public Map<String,String> get(String param) {
  System.out.println("param："+param);
  response.put("state", "success");//將數(shù)據(jù)放在Map對(duì)象中
  return response;
 }

post

 @RequestMapping("/post2")
 @ResponseBody
 public void post2(@RequestBody User user, HttpServletResponse resp) {
  //返回不同的http狀態(tài)
  if(user.getName()!=null&&!user.getName().equals("")){
   resp.setStatus(200);
  }
  else{
   resp.setStatus(300);
  }
 }

如果需要配置請(qǐng)求頭部

  $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請(qǐng)求的回調(diào)函數(shù)處理并執(zhí)行下一步操作

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發(fā)送異步Get/Post請(qǐng)求方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: