html5_AngularJs访问网络数据ajax

来源:互联网 发布:数控机床的数据参数 编辑:程序博客网 时间:2024/06/03 12:19


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <script type="text/javascript" src="jquery-1.11.0.js"></script>    <script>        var app = angular.module("myapp",[]);        app.controller("myctrl",function($scope, $http){            $http({                method: "GET",                url: "book.json"            }).success(function(data, status, headers, config){                $scope.book = data;            }).error(function(data, status, headers, config){            });            $http({                method: "GET",                url: "books.json"            }).success(function(data, status, headers, config){                $scope.books = data;            }).error(function(data, status, headers, config){            });          
            //get请求            $http.get("https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2").then(function (response) {                $scope.book=response.data;            }, function (response) {               console.log(response.status);            });
});
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">   
     <ul>        
       <li>ID:{{book.id}}</li>
       <li>标题:{{book.title}}</li>
       <li>图片:<img src="{{book.picture}}" style="width: 100px;height: 100px"></li>
     </ul>
  <table border="1" cellpadding="10" cellspacing="0">
     <tr>
         <td>ID</td>
         <td>标题</td>
         <td>图片</td>
     </tr>      
    <tr ng-repeat="book in books">
          <td>{{book.id}}</td>
          <td>{{book.title}}</td>
          <td><img src="{{book.picture}}" style="width: 100px;height: 100px"></td>
      </tr>  
</table>
</body>
</html>