當(dāng)前位置：首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

AngularJS学习笔记（3）——通过Ajax获取JSON数据

發(fā)布時(shí)間：2023/11/27 生活经验 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS学习笔记（3）——通过Ajax获取JSON数据小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

通過(guò)Ajax獲取JSON數(shù)據(jù)

以我之前寫的與用戶交互的動(dòng)態(tài)清單列表為例，使用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){ //以$開(kāi)頭的變量名表示AngularJS的內(nèi)置特性 $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"使未辦事項(xiàng)數(shù)為0時(shí)不顯示此標(biāo)簽--> <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>

效果圖如下：?

現(xiàn)在把模型model內(nèi)的items中的值單獨(dú)寫成一個(gè)JSON文件，再通過(guò)發(fā)起Ajax請(qǐng)求的方式獲取JSON數(shù)據(jù)。

1.把todo.html文件內(nèi)的模型model去除直接定義的items，改成如下形式：

 var model = {user: "admin"};

2.新建todo.json文件并編寫如下代碼：

[{"action": "練車","done": false}, {"action": "看書","done": true} ]

3.發(fā)起Ajax請(qǐng)求的方式獲取JSON數(shù)據(jù)：

......
todoApp.run(function ($http) {$http.get("./todo.json").success(function (data) { model.items = data; console.log("data:" ,data ); console.log("items:" , model.items) }); }); ......

現(xiàn)在，清單列表中的數(shù)據(jù)項(xiàng)就都是通過(guò)JSON數(shù)據(jù)來(lái)傳遞的了，使用Chrome可以瀏覽器查看時(shí)可以按F12看到NetWork的狀態(tài)，狀態(tài)碼為200即成功獲取?？梢钥吹絫odo.json的數(shù)據(jù)成功獲取到了：?

而且顯示的頁(yè)面效果與原先一致。

完整源碼（css/js文件需自己額外設(shè)置）：?
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"使未辦事項(xiàng)數(shù)為0時(shí)不顯示此標(biāo)簽--> <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} ]

轉(zhuǎn)載于:https://www.cnblogs.com/benmumu/p/9025171.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS学习笔记（3）——通过Ajax获取JSON数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。