用$http的方法请求json数据（angularjs）附加时间间隔和时间等待

最新推荐文章于 2022-10-15 16:23:00 发布

迷人的脚毛

最新推荐文章于 2022-10-15 16:23:00 发布

阅读量1.6k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_40090482/article/details/78229745

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用$http的方法请求json数据，

       下面一共写了俩种方法 其实都一样只是 ， 一个有输入框进行查询如下：

第一个：

   首先上图：

                               没有输入框的

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>用$http的方法请求json数据</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myApp",[]);
        //json串连接
        app.value("url","https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2")
        app.controller("myCtrl",function ($scope,$http,url) {
            //$http：服务向服务器发送请求，应用响应服务器传过来的数据。
            //$http.get(url)适用于读取数据的函数
            $http.get(url).then(function (response) {
                //开发者工具，主要是查看哪里报错
                console.log(response.data);
                //一层一层的找到需要的数据名称
                $scope.city=response.data.HeWeather5[0].basic.city;
                $scope.brf=response.data.HeWeather5[0].suggestion.comf.brf;
                $scope.txt=response.data.HeWeather5[0].suggestion.air.txt;
            },function () {
                //开发者工具，主要是查看哪里报错
                console.log(response.status)
            })


        });

    </script>
</head>
<body>
<div ng-controller="myCtrl">
    //在json串中的数据名称
    <div>城市：{{city}}</div>
    <div>空气质量：{{brf}}</div>
    <div>注意事项：{{txt}}</div>

</div>

</body>
</html>

第二个：

   有输入框的：

上代码：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>用$http的方法请求json数据</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope,$http) {
            //input 页面的框里输入的值传递给下面的json串
            $scope.cx="";
            //这里设置一个button按钮进行点击运行
            $scope.cha=function () {
                $http({
                    //指定的类型
                    method:"GET",
                    //json串连接                   这里需要在页面传递过来输入的值不断变化所以要写成活的
                    url:"https://free-api.heweather.com/v5/weather?city="+$scope.cx+"&key=545d63e185fc48169a43cbabba6e74d2"
                }).then(function (dd) {
                    //一层一层的找到需要的数据名称
                    $scope.city=dd.data.HeWeather5[0].basic.city;
                    $scope.brf=dd.data.HeWeather5[0].suggestion.comf.brf;
                    $scope.txt=dd.data.HeWeather5[0].suggestion.air.txt;
                })
            }
        })

    </script>
</head>
<body>
<div ng-controller="myCtrl">
    <input type="text" ng-model="cx"> <button ng-click="cha()">查询</button>
    <div>城市：{{city}}</div>
    <div>空气质量：{{brf}}</div>
    <div>注意事项：{{txt}}</div>

</div>

</body>
</html>

请求本地json数据：
上图： 

需要注意的是把json串文件放在代码工具的同一文件夹下：


接下来上代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>用$http的方法请求json数据   本地</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myApp",[]);
        app.controller("booksa",function ($scope,$http) {
            $http.get("book.json").then(function (response) {
                $scope.book=response.data;
            },function (response) {
                alert(response.status);
            })
        })

    </script>
</head>

<body>
<div ng-controller="booksa">
    <ul>
        <li>ID:{{book.id}}</li>
        <li>标题:{{book.title}}</li>4
        <li>类型:{{book.type}}</li>
        <li>描述:{{book.description}}</li>
        <li>图片:<img src="{{book.picture}}"></li>
        <li>是否推荐:{{book.isRecommend}}</li>
        <li>上架时间:{{book.dtCreated}}</li>
    </ul>
</div>

</body>
</html>
=====================================================================================
最后附加   时间间隔  和时间等待：

上图：


代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>显示时间的方法 </title>
    <script type="text/javascript" src="angular-1.3.0.js"></script>

</head>
<body>
<div ng-controller="myCtrl">
    <div>{{name}}</div>
    <div>等待5秒显示文字:{{namea}}</div>
</div>
<script>
    var aa = function () {
        //时间    年月日   时分秒
        return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
    };

    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function ($scope,$interval,$timeout) {
        //时间间隔    一秒执行一次
            $interval(function () {
                $scope.name=aa();
        },1000);
            //时间等待   等待5秒
        $timeout(function () {
            $scope.namea="你好，！"
        },5000);
    });

</script>
</body>
</html>

迷人的脚毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用$http的方法请求json数据（angularjs）附加时间间隔和时间等待

用$http的方法请求json数据，下面一共写了俩种方法其实都一样只是，一个有输入框进行查询如下：第一个：首先上图：没有输入框的html>html lang="en" ng-app="myApp">head> meta charset="UTF-8"> ti
复制链接

扫一扫

专栏目录