angularJs中的http服务

来源：互联网发布：半身裙淘宝店好一点编辑：程序博客网时间：2024/05/20 06:55

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/angular.min.js"></script> <script> var app= angular.module("gaoynApp",[]); app.controller("democ",["$scope","$http",function($scope,$http){ $scope.getData=function(){ console.log(">>>>>>>>>>>>"); //通过http请求服务端一个json数据串 //• $http.get(url)适用于读取数据的函数 //stars.json url $http.get("stars.json").then(function(resp){ //获取真正的数据源本质就是数组 $scope.datas=resp.data; }); } }]); </script> </head> <body ng-app="gaoynApp" ng-controller="democ"> <input type="button" value="获取数据" ng-click="getData()" /> 服务器端返回的数据 <table border="1px"> <tr ng-repeat="data in datas"> <td>{{data.name}}</td> <td> <img width="100px" src={{data.photo}}alt="图片无法加载显示"/> </td> <td>{{data.age}}</td> <td>{{data.sex}}</td> </tr> </table> </body> </html>json:

[
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "李力宏",
"photo": "./images/xue1.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/xue2.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
}
]

阅读全文

0 0