AngularJS入门教程之 XMLHttpRequest实例讲解
程序员文章站
2022-07-05 19:57:08
angularjs xmlhttprequest
$http 是 angularjs 中的一个核心服务，用于读取远程服务器的数据。
读取 json 文件...
angularjs xmlhttprequest
$http 是 angularjs 中的一个核心服务，用于读取远程服务器的数据。
读取 json 文件
以下是存储在web服务器上的 json 文件：
http://www.runoob.com/try/angularjs/data/customers_json.php
{
"records":
[
{
"name" : "alfreds futterkiste",
"city" : "berlin",
"country" : "germany"
},
{
"name" : "berglunds snabbköp",
"city" : "luleå",
"country" : "sweden"
},
{
"name" : "centro comercial moctezuma",
"city" : "méxico d.f.",
"country" : "mexico"
},
{
"name" : "ernst handel",
"city" : "graz",
"country" : "austria"
},
{
"name" : "fissa fabrica inter. salchichas s.a.",
"city" : "madrid",
"country" : "spain"
},
{
"name" : "galería del gastrónomo",
"city" : "barcelona",
"country" : "spain"
},
{
"name" : "island trading",
"city" : "cowes",
"country" : "uk"
},
{
"name" : "königlich essen",
"city" : "brandenburg",
"country" : "germany"
},
{
"name" : "laughing bacchus wine cellars",
"city" : "vancouver",
"country" : "canada"
},
{
"name" : "magazzini alimentari riuniti",
"city" : "bergamo",
"country" : "italy"
},
{
"name" : "north/south",
"city" : "london",
"country" : "uk"
},
{
"name" : "paris spécialités",
"city" : "paris",
"country" : "france"
},
{
"name" : "rattlesnake canyon grocery",
"city" : "albuquerque",
"country" : "usa"
},
{
"name" : "simons bistro",
"city" : "københavn",
"country" : "denmark"
},
{
"name" : "the big cheese",
"city" : "portland",
"country" : "usa"
},
{
"name" : "vaffeljernet",
"city" : "århus",
"country" : "denmark"
},
{
"name" : "wolski zajazd",
"city" : "warszawa",
"country" : "poland"
}
]
}
angularjs $http
angularjs $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
angularjs 实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="customersctrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('customersctrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/customers_json.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
</body>
</html>
运行结果：
- alfreds futterkiste, germany
- ana trujillo emparedados y helados, mexico
- antonio moreno taquería, mexico
- around the horn, uk
- b's beverages, uk
- berglunds snabbköp, sweden
- blauer see delikatessen, germany
- blondel père et fils, france
- bólido comidas preparadas, spain
- bon app', france
- bottom-dollar marketse, canada
- cactus comidas para llevar, argentina
- centro comercial moctezuma, mexico
- chop-suey chinese, switzerland
- comércio mineiro, brazil
应用解析:
注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将
customers_json.php 的数据拷贝到你自己的服务器上，附：php ajax 跨域问题最佳解决方案。
angularjs 应用通过 ng-app 定义。应用在 <div> 中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customerscontroller 是一个标准的 javascript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 json 数据。
服务器数据文件为： http://www.runoob.com/try/angularjs/data/customers_json.php。
当从服务端载入 json 数据时，$scope.names 变为一个数组。
注意：以上代码也可以用于读取数据库数据。
以上就是对angularjs xmlhttprequest资料的整理，后续继续补充，希望能帮助有需要的朋友。