开始学习AngularJs之：http请求

  • binGe博客
  • 前端心得
  • 2022/3/7 17:30:00
  • 人已阅读
简介
<!doctype html>
<html ng-app="httpExample">
<body>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
    </button>
    <span>
        count: {{count}}
    </span>
    <div ng-app="httpExample" ng-controller="FetchController">
        <select ng-model="method" aria-label="Request method">
            <option>GET</option>
            <option>POST</option>
        </select>
        <input type="text" ng-model="url" size="80" aria-label="URL" />
        <button id="fetchbtn" ng-click="fetch()">fetch</button><br>
        <button id="fetchbtn" ng-click="clear()">clear</button><br>
        <pre>http status code: {{status}}</pre>
        <pre>http response data: {{data}}</pre>
    </div>
    <script src="angular.min.js"></script>
    <script>
        var ang = angular.module('httpExample', []);
        ang.controller('FetchController', ['$scope', '$http', '$templateCache',
                function ($scope, $http, $templateCache) {
                    $scope.method = 'GET';
                    $scope.url = 'https://api.apiopen.top/getJoke?page=1&count=2&type=video';

                    $scope.clear = function () {
                        $scope.data = '';
                    }
                    $scope.fetch = function () {
                        $scope.code = null;
                        $scope.response = null;

                        $http({ method: $scope.method, url: $scope.url, cache: $templateCache }).
                            then(function (response) {
                                $scope.status = response.status;
                                $scope.data = response.data;
                            }, function (response) {
                                $scope.data = response.data || "Request failed";
                                $scope.status = response.status;
                            });
                    };

                }]);
    </script>
</body>
</html>


上一篇：关于Element表格加载卡顿问题

下一篇：使用Angular的8个理由 - Sweetcode

文章评论

评论
  • 消灭零回复
Top