通过Ajax获取JSON数据

以我之前写的与用户交互的动态清单列表为例，使用JSON前todo.html代码如下：

<!DOCTYPE html>

<html ng-app="todoApp">

<head>

    <meta charset="UTF-8">

    <title>TO DO List</title>

    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>

    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>

    <script src="./angularJs/angular.js"></script>

    <script>

        var model = {

            user:"Yimi",

            items:[{action:"练车",done:true},

                {action:"看课外书",done:false}]

        };

        var todoApp = angular.module("todoApp",[]);

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            $scope.todo = model;

            $scope.incompleteCount = function(){

                var count = 0;

                angular.forEach($scope.todo.items,function(item){

                    if(!item.done){count++;}

                });

                return count;

            }

            $scope.warningLevel = function(){

                return $scope.incompleteCount() < 2 ? "label-success" : "label-warning";

            }

            $scope.addNewItem = function(actionText){

                $scope.todo.items.push({action:actionText, done:false});

            }

        });

    </script>

</head>

<body ng-controller="ToDoCtrl">

<div class="page-header">

    <h1>{{todo.user}}'s TO DO List

    <!--添加ng-hide="incompleteCount() == 0"使未办事项数为0时不显示此标签-->

    <span class="label label-default" ng-hide="incompleteCount() == 0" ng-class="warningLevel()">{{incompleteCount()}}</span></h1>

</div>

<div class="panel">

    <div class="input-group">

        <input class="form-control" ng-model="actionText"/>

        <span class="input-group-btn">

                <button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button>

        </span>

    </div>

    <table class="table table-striped">

        <thead>

        <tr>

            <th>Description</th>

            <th>Done</th>

        </tr>

        </thead>

        <tbody>

        <tr ng-repeat="item in todo.items">

            <td>{{item.action}}</td>

            <td><input type="checkbox" ng-model="item.done"/></td>

            <td>{{item.done}}</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

效果图如下： 

现在把模型model内的items中的值单独写成一个JSON文件，再通过发起Ajax请求的方式获取JSON数据。

1.把todo.html文件内的模型model去除直接定义的items，改成如下形式：

 var model = {

            user: "admin"

        };

2.新建todo.json文件并编写如下代码：

[

  {"action": "练车","done": false},

  {"action": "看书","done": true}

]

3.发起Ajax请求的方式获取JSON数据：

......

todoApp.run(function ($http) {

            $http.get("./todo.json").success(function (data) {

                model.items = data;

                console.log("data:" ,data );

                console.log("items:" , model.items)

            });

        });

......

现在，清单列表中的数据项就都是通过JSON数据来传递的了，使用Chrome可以浏览器查看时可以按F12看到NetWork的状态，状态码为200即成功获取。可以看到todo.json的数据成功获取到了： 

而且显示的页面效果与原先一致。

完整源码（css/js文件需自己额外设置）： 
todo.html

<!DOCTYPE html>

<html ng-app="todoApp">

<head>

    <meta charset="UTF-8">

    <title>TO DO List</title>

    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>

    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>

    <script src="./angularJs/angular.js"></script>

    <script>

        var model = {

            user: "Yimi"

        };

        var todoApp = angular.module("todoApp", []);

        todoApp.run(function ($http) {

            $http.get("./todo.json").success(function (data) {

                model.items = data;

                console.log("data:" ,data );

                console.log("items:" , model.items)

            });

        });

        todoApp.controller("ToDoCtrl", function ($scope) {

            $scope.todo = model;

            $scope.incompleteCount = function () {

                var count = 0;

                angular.forEach($scope.todo.items, function (item) {

                    if (!item.done) {

                        count++;

                    }

                });

                return count;

            }

            $scope.warningLevel = function () {

                return $scope.incompleteCount() < 2 ? "label-success" : "label-warning";

            }

            $scope.addNewItem = function (actionText) {

                $scope.todo.items.push({action: actionText, done: false});

            }

        });

    </script>

</head>

<body ng-controller="ToDoCtrl">

<div class="page-header">

    <h1>{{todo.user}}'s TO DO List

        <!--添加ng-hide="incompleteCount() == 0"使未办事项数为0时不显示此标签-->

        <span class="label label-default" ng-hide="incompleteCount() == 0" ng-class="warningLevel()">{{incompleteCount()}}</span>

    </h1>

</div>

<div class="panel">

    <div class="input-group">

        <input class="form-control" ng-model="actionText"/>

        <span class="input-group-btn">

                <button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button>

        </span>

    </div>

    <table class="table table-striped">

        <thead>

        <tr>

            <th>Description</th>

            <th>Done</th>

            <th></th>

        </tr>

        </thead>

        <tbody>

        <tr ng-repeat="item in todo.items">

            <td>{{item.action}}</td>

            <td><input type="checkbox" ng-model="item.done"/></td>

            <td>{{item.done}}</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

todo.json

[

  {"action": "练车","done": false},

  {"action": "看书","done": true}

]

AngularJS学习笔记（3）——通过Ajax获取JSON数据的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. 【Spring学习笔记-MVC-4】SpringMVC返回Json数据-方式2

    <Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...

  3. 【Spring学习笔记-MVC-3】SpringMVC返回Json数据-方式1

    <Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...

  4. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  5. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  6. Android 学习笔记之Volley(七)实现Json数据加载和解析...

    学习内容: 1.使用Volley实现异步加载Json数据...   Volley的第二大请求就是通过发送请求异步实现Json数据信息的加载,加载Json数据有两种方式,一种是通过获取Json对象,然后 ...

  7. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  9. java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

随机推荐

  1. 雷林鹏分享：Ruby CGI 编程

    Ruby CGI 编程 Ruby 是一门通用的语言,不仅仅是一门应用于WEB开发的语言,但 Ruby 在WEB应用及WEB工具中的开发是最常见的. 使用Ruby您不仅可以编写自己的SMTP服务器,FT ...

  2. 2018-2019-2《网络对抗技术》Exp0 Kali安装 Week1

    2018-2019-2<网络对抗技术>Exp0 Kali安装 Week1 Kali的安装 设置虚拟机的名称和操作系统 为虚拟机分配虚拟内存,大小为4096M,分配存储空间,大小为25.0G ...

  3. uva-1636-概率

    https://vjudge.net/problem/UVA-1636 给出一个左轮手枪的弹夹串,第一枪是空的,问是继续打还是转一转再打下一枪还为空的概率大.继续打为空的概率就是 '00'的个数比上' ...

  4. 聊聊一直困扰前端程序员的浏览器兼容-【JavaScript】

    上篇已经写过浏览器的兼容发展历史以及主流浏览器,主要的css兼容我知道的已全部写到,这篇这篇专攻javascript的兼容. 1.getYear()方法 var year = new Date().g ...

  5. asp.net导出excel并弹出保存提示框

    asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1  转:78   |  分享  腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报          ...

  6. 安卓开发分享功能，分享到facebook网页上不显示图片的问题

    最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...

  7. ReactNative 问题集合

    在线流畅播放视频 (建议调用原生的视频组件, 或者在成熟的安卓 ios组件封装一层) 如何指定页面横屏 (在这个组件react-native-orientation基础上改写) webSocket不和 ...

  8. Winform菜单之Menustrip

    有窗体必定有菜单了,可以直接使用菜单组件,也可以使用按钮(按钮就没法显示级联菜单的形式了). 下面重点介绍一下各种菜单 1.Menustrip 最常用的莫过于此菜单了,从工具栏中拖入一个menustr ...

  9. LOJ2316. 「NOIP2017」逛公园【DP】【最短路】【思维】

    LINK 思路 因为我想到的根本不是网上的普遍做法 所以常数出奇的大,而且做法极其暴力 可以形容是带优化的大模拟 进入正题: 首先一个很显然的思路是如果在合法的路径网络里面存在零环是有无数组解的 然后 ...

  10. visual studio内置“iis”组件提取及二次开发

    简介 visual studio安装后会自带小型的“iis”服务器,本文就简单提取一下这个组件,自己做一个小型“iis”服务器吧.先来说用途吧(废话可绕过),比如在服务器上没有安装iis,或者给客户演 ...