案例:使用jsonp获取腾讯天气信息 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsonp获取腾讯天气信息</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box"></table>
    </div>
    <script src="/js/jsonp.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        <tr>
            <th>时间</th>
            <th>温度</th>
            <th>天气</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
        {{each info}}
        <tr>
            <td>{{dateFormat($value.update_time)}}</td>
            <td>{{$value.degree}}</td>
            <td>{{$value.weather}}</td>
            <td>{{$value.wind_direction}}</td>
            <td>{{$value.wind_power}}</td>
        </tr>
        {{/each}}
    </script>
    <script>
        // 获取table标签
        var box = document.getElementById('box');

        function dateFormat(date) {
            var year = date.substr(0, 4);
            var month = date.substr(4, 2);
            var day = date.substr(6, 2);
            var hour = date.substr(8, 2);
            var minute = date.substr(10, 2);
            var seconds = date.substr(12, 2);

            return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
        }

        // 向模板中开放外部变量
        template.defaults.imports.dateFormat = dateFormat;

        // 向服务器端获取天气信息
        jsonp({
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h',
                // weather_type: 'forecast_1h|forecast_24h',
                province: '黑龙江省',
                city: '哈尔滨市'
            },
            success: function (data) {
                var html = template('tpl', {info: data.data.forecast_1h});
                box.innerHTML = html;
                
            }
        })
    </script>
</body>
</html>

 

posted @ 2020-05-22 20:16  不忘初心l  阅读(439)  评论(1)    收藏  举报