html5_AngularJs访问网络数据ajax

AngularJS与jQuery数据加载

最新推荐文章于 2021-06-05 06:32:34 发布

原创最新推荐文章于 2021-06-05 06:32:34 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用AngularJS和jQuery进行数据加载的例子。通过$http服务从JSON文件中获取书籍信息，并显示在网页上。此外，还展示了如何通过$http.get发起GET请求来获取外部API的数据。

<!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>