AngularJS AJAX

$http 是用于从远程服务器读取数据的 AngularJS 服务。

AngularJS $http

AngularJS $http 服务向服务器发出请求，并返回响应。

实例

向服务器发出简单请求，并在标题中显示结果:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>今天的欢迎消息是:</p>
<h2>{{myWelcome}}</h2>
</div>
<p>$http 服务请求服务器上的一个页面，响应被设置为 "myWelcome" 变量的值。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});
</script>
</body>
</html>

运行一下

方法

上面的例子使用了 $http 服务的 .get 方法。

这个 .get 方法是 $http 服务的简写方法之一。所有简写方法如下:

.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()

以上方法都是调用 $http 服务的简写方法:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>今天的欢迎信息是:</p>
<h2>{{myWelcome}}</h2>
</div>
<p>$http 服务请求服务器上的一个页面，响应被设置为 "myWelcome" 变量的值。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "welcome.htm"
  }).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>
</body>
</html>

运行一下

上面的示例以一个对象作为参数执行 $http 服务。该对象指定 HTTP 方法、url、成功时要做什么以及失败时要做什么。

属性

来自服务器的响应是具有以下属性的对象:

.config 用于生成请求的对象。
.data 承载服务器响应的字符串或对象。
.headers 用于获取标题信息的函数。
.status 定义 HTTP 状态的数字。
.statusText 定义 HTTP 状态的字符串。

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Data : {{content}}</p>
<p>Status : {{statuscode}}</p>
<p>StatusText : {{statustext}}</p>
</div>
<p>响应对象有许多属性。此示例演示 data、status 和 statusText属性的值。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
      $scope.content = response.data;
      $scope.statuscode = response.status;
      $scope.statustext = response.statusText;
  });
});
</script>
</body>
</html>

运行一下

要处理错误，请向 .then 方法中添加一个或多个函数来处理问题:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{content}}</h2>
</div>
<p>$http 服务在成功和失败时执行不同的功能。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
      $scope.content = response.data;
  }, function(response) {
      $scope.content = "出错了";
  });
});
</script>
</body>
</html>

运行一下

JSON

您从响应中获得的数据应该是 JSON 格式的。

JSON 是一种很好的数据传输方式，在 AngularJS 或任何其他 JavaScript 中都很容易使用。

示例：在服务器上，我们有一个返回 JSON 对象的文件，该对象包含 15 个客户，所有客户都封装在名为 records 的数组中。

实例

ng-repeat 指令非常适合在数组中循环:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("/znadmin/md/2849/customers.json").then(function (response) {
      $scope.myData = response.data.records;
  });
});
</script>
</body>
</html>

运行一下

程序解释:

应用程序使用 $scope 和 $http 对象定义 customersCtrl 控制器。

$http 是用于请求外部数据的 XMLHttpRequest 对象。

$http.get() 从 https://cankaoshouce.com/znadmin/md/3849/customers.json 中读取 JSON 数据

成功后，控制器在作用域中创建一个属性 myData，其中包含来自服务器的 JSON 数据。

AngularJS AJAX

AngularJS $http

实例

方法

实例

属性

实例

实例

JSON

实例

分类导航