• 【08】AngularJS XMLHttpRequest

    AngularJS XMLHttpRequest

    $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

    读取 JSON 文件

    以下是存储在web服务器上的 JSON 文件：

    Customers_JSON.php

    1. [{
    2. "Name":"Alfreds Futterkiste",
    3. "City":"Berlin",
    4. "Country":"Germany"
    5. },{
    6. "Name":"Berglunds snabbköp",
    7. "City":"Luleå",
    8. "Country":"Sweden"
    9. },{
    10. "Name":"Centro comercial Moctezuma",
    11. "City":"México D.F.",
    12. "Country":"Mexico"
    13. },{
    14. "Name":"Ernst Handel",
    15. "City":"Graz",
    16. "Country":"Austria"
    17. },{
    18. "Name":"FISSA Fabrica Inter. Salchichas S.A.",
    19. "City":"Madrid",
    20. "Country":"Spain"
    21. },{
    22. "Name":"Galería del gastrónomo",
    23. "City":"Barcelona",
    24. "Country":"Spain"
    25. },{
    26. "Name":"Island Trading",
    27. "City":"Cowes",
    28. "Country":"UK"
    29. },{
    30. "Name":"Königlich Essen",
    31. "City":"Brandenburg",
    32. "Country":"Germany"
    33. },{
    34. "Name":"Laughing Bacchus Wine Cellars",
    35. "City":"Vancouver",
    36. "Country":"Canada"
    37. },{
    38. "Name":"Magazzini Alimentari Riuniti",
    39. "City":"Bergamo",
    40. "Country":"Italy"
    41. },{
    42. "Name":"North/South",
    43. "City":"London",
    44. "Country":"UK"
    45. },{
    46. "Name":"Paris spécialités",
    47. "City":"Paris",
    48. "Country":"France"
    49. },{
    50. "Name":"Rattlesnake Canyon Grocery",
    51. "City":"Albuquerque",
    52. "Country":"USA"
    53. },{
    54. "Name":"Simons bistro",
    55. "City":"København",
    56. "Country":"Denmark"
    57. },{
    58. "Name":"The Big Cheese",
    59. "City":"Portland",
    60. "Country":"USA"
    61. },{
    62. "Name":"Vaffeljernet",
    63. "City":"Århus",
    64. "Country":"Denmark"
    65. },{
    66. "Name":"Wolski Zajazd",
    67. "City":"Warszawa",
    68. "Country":"Poland"
    69. }]
     
     

    AngularJS $http

     

    1. AngularJS $http 是一个用于读取web服务器上数据的服务。
    2. $http.get(url)是用于读取服务器数据的函数。
     

     

     

    1. <div ng-app="myApp" ng-controller="customersCtrl">
    3. <ul>
    4. <li ng-repeat="x in names">
    5. {{ x.Name+', '+ x.Country}}
    6. </li>
    7. </ul>
    9. </div>
    11. <script>
    12. var app = angular.module('myApp',[]);
    13. app.controller('customersCtrl',function($scope,$http){
    14. $http.get("Customers_JSON.php")
    15. .success(function(response){$scope.names = response.records;});
    16. });
    17. </script>

    应用解析:

    注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上。

    AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

    ng-controller 指令设置了 controller 对象 名。

    函数 customersController 是一个标准的 JavaScript 对象构造器。

    控制器对象有一个属性: $scope.names。

    $http.get() 从web服务器上读取静态 JSON 数据。

    当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

     
    魔芋练习：
     
    其中，test.php 文件内容为：
    1. {"records":[{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},{"Name":"Around the Horn","City":"London","Country":"UK"},{"Name":"B's Beverages","City":"London","Country":"UK"},{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},{"Name":"Bon app'","City":"Marseille","Country":"France"},{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}]}
     
    demo.html内容为：
     
    1. <!DOCTYPE html>
    2. <html lang="zh-cn">
    4. <head>
    5. <meta charset="utf-8">
    6. <meta name="renderer" content="webkit">
    7. <!--360,以webkit内核进行渲染-->
    8. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    9. <!--以最新内核进行渲染。-->
    10. <meta http-equiv="Cache-Control" content="no-siteapp"/>
    11. <!--百度禁止转码-->
    12. <title>moyu demo</title>
    13. <meta name="keywords" content="demo 测试 魔芋">
    14. <meta name="description" content="魔芋的测试示例">
    15. <meta name="robots" content="index,follow">
    16. <!--定义网页搜索引擎索引方式-->
    17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    19. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    20. <style>
    22. </style>
    23. </head>
    25. <body>
    26. <div ng-app="myApp" ng-controller="customersCtrl">
    27. <ul>
    28. <li ng-repeat="x in names">
    29. {{ x.Name+', '+ x.Country}}
    30. </li>
    31. </ul>
    32. </div>
    33. <script>
    34. var app = angular.module('myApp',[]);
    35. app.controller('customersCtrl',function($scope, $http){
    36. $http.get("test.php")
    37. .success(function(response){
    38. $scope.names = response.records;
    39. });
    40. });
    41. </script>
    42. </body>
    44. </html>
     
    结果：
     
     
     
     
     
     
     
     
     
     
     
    **
  • 相关阅读:
    [Leetcode][Python]29: Divide Two Integers
    [Leetcode][Python]28: Implement strStr()
    [Leetcode][Python]27: Remove Element
    前端笔记（百度）
    关于html5新增的功能（百度）
    一些我容易混淆的知识（关于数组的操作、对字符串的操作）
    web前端~~浏览器兼容问题（百度）
    关于前端的性能优化问题
    封装ajax（二）闭包的形式
    封装ajax
  • 原文地址：https://www.cnblogs.com/moyuling/p/5207136.html
Copyright © 2020-2023  润新知