欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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资料的整理,后续继续补充,希望能帮助有需要的朋友。