AngularJS 获取JSON数据

最新推荐文章于 2024-09-15 07:43:52 发布

HitTheZone

最新推荐文章于 2024-09-15 07:43:52 发布

阅读量5.7k

点赞数

分类专栏：学习笔记 angularJS 文章标签： angularjs json

本文链接：https://blog.csdn.net/citunying6597/article/details/77877957

版权

学习笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

angularJS

4 篇文章 0 订阅

订阅专栏

一、使用$http

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。
这两个方法最基本的使用场景如下：

$http({
    method: 'GET',
    url: '/api/users.json'
}).success(function(data,status,headers,config){
    //当相应准备就绪时调用
}).error(function(data,status,headers,config){
    //当响应以错误状态返回时调用
});

二、AngularJS获取JSON数据实例代码

1、data.json:

[
  {
    "Name":"Mahesh Parashar",
    "RollNo":101,
    "Percentage":"80%"
  },

  {
    "Name":"Dinkar Kad",
    "RollNo":201,
    "Percentage":"70%"
  },

  {
    "Name":"Robert",
    "RollNo":191,
    "Percentage":"75%"
  },

  {
    "Name":"Julian Joe",
    "RollNo":111,
    "Percentage":"77%"
  }
]

2、index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angular_learn</title>
    <script src="js/angular-1.3.0.js"></script>
</head>
<body>
    <div class="dataList" ng-app="myApp" ng-controller="myController">
        <ul>
            <!--在读取数据的区域添加ng-repeat-->
            <li ng-repeat="student in students">
                <span>{{student.Name}}</span>
                <span>{{student.RollNo}}</span>
                <span>{{student.Percentage}}</span>
            </li>
        </ul>
    </div>

    <script src="js/angular-1.3.0.js"></script>
    <script>
        var myApp = angular.module("myApp",[]);
        myApp.controller("myController",function ($scope, $http) {
           var dataUrl = "json/data.json";
           //获取数据
           $http.get(dataUrl).success(function (data) {
               $scope.students = data;
           }).error(function () {
               alert("出错");
           });
        });
    </script>
</body>
</html>

三、方法总结

1、配置对应的控制器，将$scope、$http服务注入改控制器中；
2、使用$http.get(),把将要读取的数据文件的url写入；
3、使用回调函数，成功时，将所得的data赋给$scope作用域下的变量products。
4、由前台使用ng-repeat指令进行遍历逐一取出数据。

部分内容转载自：面具哥布林的博客