使用ajax获取数据

最新推荐文章于 2024-05-13 03:34:52 发布

&zhxiao

最新推荐文章于 2024-05-13 03:34:52 发布

阅读量1.3k

点赞数 2

分类专栏： JavaScript 文章标签： 1024程序员节 jquery javascript ajax

本文链接：https://blog.csdn.net/qq_43789285/article/details/109267215

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用jQuery发送AJAX请求获取每日天气

1. ajax

即异步请求(异步的JavaScript与XML技术)，区别于同步请求,指的是一套综合了多项技术的浏览器端网页开发技术。今天就使用ajax发送异步请求获取天气数据。

2. 资料

2.1 jQuery包：

使用npm下载

npm install jquery

直接下载（网址）

https://jquery.com/

2.2 各城市代码列表链接

https://www.cnblogs.com/oucbl/p/6141405.html

2.3 天气信息接口

https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=' + 城市代码 + '&_jsonp=callback

注意：这个得到的数据是Unicode编码的，和平时看到的数据不一样。如果想转换数据，可以使用https://tool.chinaz.com/tools/unicode.aspx网址进行转换。

3. 代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当前天气</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 620px;
            height: 400px;
            /* border: 1px solid black; */
            background-color: rgba(250, 235, 215, 0.192);
            margin: 100px auto;
            position: relative;
        }

        #box .selectOption{
            width: 100%;
            height: 60px;
            background-color: rgba(82, 199, 235, 0.178);
        }

        #box .selectOption .select{
            margin-left: 100px;
            line-height: 60px;
        }

        #box .select select{
            width: 150px;
            height: 30px;
            text-align-last: center;
        }

        #box .btn{
            width: 140px;
            height: 30px;
            position: absolute;
            margin-left: 100px;
        }
        #box .btn input{
            width: 100%;
            height: 100%;
            position: absolute;
            margin-top: 15px;
        }

        #box .contain{
            width: 100%;
            height: 320px;
            margin-top: 20px;
            /* background-color: rgba(231, 52, 52, 0.123); */
        }

        #box .contain ul{
            width: 100%;
            height: 100%;
        }

        #box .contain ul li{
            width: 120px;
            height: 100%;
            margin:0 2px;
            background-color: rgba(111, 234, 243, 0.575); 
            float: left;
            list-style: none;
        }

        #box .contain ul li span{
            font-size: 14px;
            margin-left: 2px; 
            color: rgb(28, 28, 29);
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="selectOption">
            <span class="select"><select name="" id="select">
                <option value="">请选择</option>
                <option value="101180201">安阳</option>
                <option value="101180101">郑州</option>
                <option value="101180701">南阳</option>
                <option value="101120501">烟台</option>
                <option value="101121301">威海</option>
                <option value="101120201">青岛</option>
            </select></span>
            <span class="btn"><input type="button" value="点击查询天气" id="btn"></span>
        </div>
        <div class="contain">
            <ul>
            </ul>
        </div>
    </div>

    <script src="./jquery1.7.2.js"></script>
    <script>
        $('#btn').click(function(){
            var value = $('select').val();    
            var url = 'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=' + value + '&_jsonp=callback' ;
            $("body").append($("<script src='" + url + "'><script>"));
        })

        function callback(data){
            $('.contain ul').html("");
            var wt = data.weather;

            $.each(wt,function(index,el){
                var date = el.date;
                var day = el.info.day;
                var night = el.info.night;
                var tag = '<li>';
                tag += '<span>日期： ' + date + '</span></br>';
                tag += '</br>'
                tag += '<span>白天最低气温： ' + day[0] + '</span></br>';
                tag += '<span>白天天气： ' + day[1] + '</span></br>';
                tag += '<span>白天最高气温：' + day[2] + '</span></br>';
                tag += '<span>白天风向：' + day[3] + '</span></br>';
                tag += '<span>白天风速： ' + day[4] + '</span></br>';
                tag += '</br>'
                tag += '<span>夜晚最低气温： ' + night[0] + '</span></br>';
                tag += '<span>夜晚天气: ' + night[1] + '</span></br>';
                tag += '<span>夜晚最高气温：' + night[2] + '</span></br>';
                tag += '<span>夜晚风向：' + night[3] + '</span></br>';
                tag += '<span>夜晚风速： ' + night[4] + '</span></br>';
                tag += '</li>';
                $('.contain ul').append(tag);
            })
        }
    </script>
</body>
</html>

4. 效果

在这里插入图片描述

&zhxiao

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用ajax获取数据

使用jQuery发送AJAX请求获取每日天气1. ajax即异步请求(异步的JavaScript与XML技术)，区别于同步请求,指的是一套综合了多项技术的浏览器端网页开发技术。今天就使用ajax发送异步请求获取天气数据。2. 资料2.1 jQuery包：使用npm下载npm install jquery直接下载（网址）https://jquery.com/2.2 各城市代码列表链接https://www.cnblogs.com/oucbl/p/6141405.html2.
复制链接

扫一扫