通过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. windows 上 Python 通过 SCP 连接linux server

    环境搭建 需要安装以下包 pycrypto (需要VC编译环境) paramiko  (SSH的基础) scpclient-0.4 (paramiko 上的一个wrapper) 在安装pycrypto ...

  2. POJ 2409 Let it Bead (Polya定理)

    题意 用k种颜色对n个珠子构成的环上色,旋转翻转后相同的只算一种,求不等价的着色方案数. 思路 Polya定理 X是对象集合{1, 2, --, n}, 设G是X上的置换群,用M种颜色染N种对象,则不 ...

  3. https ddos攻击——由于有了认证和加解密 后果更严重 看绿盟的产品目前对于https的ddos cc攻击需要基于内容做检测

    如果web服务器支持HTTPS,那么进行HTTPS洪水攻击是更为有效的一种攻击方式,一方面,在进行HTTPS通信时,web服务器需要消耗更多的资源用来进行认证和加解密,另一方面,一部分的防护设备无法对 ...

  4. zookeeper的安装和部署

    参考: https://testerhome.com/topics/11361 http://blog.csdn.net/lihao21/article/details/51778255 https: ...

  5. sgu 146. The Runner 取模技巧 难度:1

    146. The Runner time limit per test: 0.25 sec.memory limit per test: 4096 KB input: standard inputou ...

  6. 什么是API？我们常说调用API

    如果你不知道 API 是什么,说明你英语真的很差. API 就是 Application Programming Interface 三个单词,如果你不能顾名思义的话,我就举例说明. 1. DOM A ...

  7. checkbox选中的问题（Ajax.BeginForm）

    判断checkbox选中的方法方法一:if ($("#checkbox-id")get(0).checked) { // do something} 方法二:if($('#chec ...

  8. PHPCMS v9 二次开发_验证码结合Session开发

    本文主要讲解了在V9中使用v9自带验证码并且需要使用session的情况下,多种问题的解决.:).如有问题或者更好的解决办法,希望不吝赐教. 1.前端调用验证码 pc_base::load_sys_c ...

  9. 自动化测试--响应请求测试（.net)

    Web运行原理简单地说是“浏览器发送一个HTTP Request到Web服务器上,Web服务器处理完后将结果(HTTP Response)返回给浏览器”. 通常测试一个web api是否正确,可以通过 ...

  10. WIN7下用笔记本创建无线网

    系统要求:WIN7  硬件要求:拥有无线网卡  网络要求:已经连接internet 1.启用并设定虚拟Wifi网卡:运行以下命令启用虚拟无线网卡(相当于打开路由器): netsh wlan set h ...