AngularJS学习笔记（3）——通过Ajax获取JSON数据
2024-05-09 06:17:08
通过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} ]转载于:https://www.cnblogs.com/benmumu/p/9025171.html
AngularJS学习笔记（3）——通过Ajax获取JSON数据相关推荐
- Ajax 获取 JSON数据
文章目录 Ajax获取JSON数据 Ajax获取JSON数据 Ajax 全称"Asynchronous JavaScript and XML",译为"异步 JavaScr ...
- ajax获取json里的list,ajax获取json数据然后将其装载到jqgrid实现
1. 通过ajax同步获取json数据 2. 本地装载jqgrid数据 $("#grid").jqGrid({ datatype: "local", data ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
- java跨域解析json数据_java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据...
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
- jsTree ajax 获取json数据加载树
后台获取json格式数据. 直接上代码. 最后有一张官方ajax获取tree的说明. var ajaxTreeSample = function() {$("#tree_4").j ...
- ajax获取json数据解析为undefined
解决办法1.使用eval()函数,把获取的数据转换为json对象. var dataObj=eval("("+data+")");//转换为json对象 然后在 ...
- ajax获取json数据示例
使用ajax请求数据时,可以先封装ajax function querystring(obj) {var str = "";for (var arr in obj) {str += ...
最新文章
- 反激式开关电源变压器设计
- python 从深度相机realsense生成pcl点云
- Spark不是唯一，三种新兴的开源数据分析工具
- 百度飞桨和Imagination宣布在全球AI生态系统方面开展合作
- python傅里叶变换库_python的numpy库和cv2库实现图像傅里叶变换
- 《数据库技术原理与应用教程第2版》——3.6计算机世界与物理模型
- Could not obtain transaction-synchronized Session for current thread原因及解决方案
- https 加端口_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云
- oracle_java.exe,系统找不到C:\ProgramData\Oracle\Java\javapath\java.exe问题及解决方案
- Moto Photon4g 电信3G历程
- 企业核心-不是技术而是人才
- Dubbo的Api+Provider+Customer示例（IDEA+Maven+Springboot+dubbo） 项目结构
- OPT机器视觉12月高峰论坛一览表
- Typora导出word文档自动生成目录
- 计算机证据和网络证据的关系,计算机证据元数据表示方法
- python项目分析报告_Python---项目需求分析
- org.springframework.amqp.AmqpException: No method found for class [B
- 试玩wordpress成功－－oNthEWay
- RoboGuide学习笔记（一）——基本工作站的建立
- Linux设备与驱动学习之----什么是驱动
热门文章
- 程序员肿么了？为何总被认为是“屌丝”
- SVO 学习笔记(三)
- usaco Telecowmunication（网络流）
- stream map方法_Java Stream中map和flatMap方法
- elementui table 固定列_elementUI Table组件 如何设置合并列
- centos php ioncube_Linux/Centos 安装PHP ioncube扩展
- 地铁闸门会夹伤人吗_西安地铁率先推出分类垃圾箱 四种类型你会放吗？
- 河南大学明德计划2020计算机学院,河南大学启动“明德计划”
- cstring只获取到第一个数_一文讲透 Dubbo 负载均衡之最小活跃数算法
- python语言入门r_小结：jieba分词的Python与R语言基础用法介绍