使用AJAX调用聚合数据模拟墨迹天气预报

最新推荐文章于 2023-08-03 13:43:18 发布

weixin_41466434

最新推荐文章于 2023-08-03 13:43:18 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_41466434/article/details/89473088

版权

一、获取数据

聚合官网：https://www.juhe.cn/docs/index/otherid/1
申请、注册、登录 —> 数据中心 —>我的接口
在这里插入图片描述
可获得数据：
1、AppKey
( 此处为自己获得的key，每个人不同，一个账号免费用500次，我的用了243次了，有需要的小伙伴可以用我的 )

0ff42dca1b07898e5d5dd29ea51dc636

2、接口
1). 看API文档
在这里插入图片描述
2). JSON返回示例：
将得到的数据用于显示时，应仔细看这些数据。
注意：future返回的为数组，非对象，且future[0]为今天的数据，future[1]才为明天的数据，以此类推。
3、测试
接口测试
1). 请求地址：http://v.juhe.cn/weather/index
2). 请求参数：cityname=%E5%A4%A9%E6%B0%B4&dtype=&format=&key=0ff42dca1b07898e5d5dd29ea51dc636
3). 请求方式：GET
4). 返回内容

二、总结

1、移动端

meta:vp加Tab
html,body{font-size:26.67vw;}

2、背景图

background: url(mj.jpg) no-repeat;
background-size: 100%;
height: 8.13rem;

3、input框聚焦后占位字消失

placeholder="西安" onfocus="this.placeholder=''"

4、页面加载完后，默认显示西安的情况，后续可进行输入搜索显示所搜索的城市情况

var city = '西安';
function getData(){
	$citycode=urlencode(city);
	...
	}
getData();
$('#city').on('blur',function(){
        city = $('#city').val();
        getData();
  })

5、解决CORS(Cross-Origin Resource Sharing)

dataType: "jsonp",

6、JQuery 设置内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

例：

$('.temperature').html(sk.temp);

三、我的案例demo

原图

我的效果图 (没截全，买家秀和卖家秀的区别~~)
在这里插入图片描述

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>天气预报</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="mj_weather">
         <!-- <button id="search">天气查询</button> 
         <p class="input_city">输入城市：</p>  -->
        <input id="city" type="text" value="" placeholder="西安" onfocus="this.placeholder=''">
        <span class="temperature"></span>
        <span class="weather"></span>
        <div class="wind_box">
            <span class="wind_direction"></span>    
            <span class="wind_scale"></span>
            <span class="humidity"></span>
            <span class="update_time"></span>
        </div>
        
        <div class="bottom_box">
            <span class="today_temperature_range"></span>
            <span class="today_weather"></span>
            <span class="tomorrow_temperature_range"></span>
            <span class="tomorrow_weather"></span>
        </div>   
    </div>
</body>
</html>
<script>
$(function(){
        /*
        * 1.输入城市名
        * 2.失焦的时候发送请求
        * 3.响应成功渲染页面
        * */

        // $('#search').on('click',function(){  //点击发送请求
            // $('#city').on('blur',function(){
    var city = '西安';
    function getData(){
        $citycode=urlencode(city);
        url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=0ff42dca1b07898e5d5dd29ea51dc636';
        $.ajax({
            url: url,
            dataType: "jsonp",
            type:"get",
            data:{
                location:city
                },
            success:function(data){
                var sk = data.result.sk;
                var today = data.result.today;
                var future = data.result.future;
                $('.temperature').html(sk.temp);
                $(".weather").html(today.weather); 
                $(".wind_direction").html(sk.wind_direction);
                $(".wind_scale").html(sk.wind_strength);
                $(".humidity").html('湿度' +sk.humidity);
                $(".update_time").html('更新时间  '+sk.time);
                $(".today_temperature_range").html(today.temperature);
                $(".today_weather").html(today.weather);
                $(".tomorrow_temperature_range").html(future[1].temperature);
                $(".tomorrow_weather").html(future[1].weather);
            }    
        });
    }
    getData();
    $('#city').on('blur',function(){
        city = $('#city').val();
        getData();
    })
});
function urlencode(str) {    
    str = (str + '').toString();   
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
} 
</script>
<style>
    *{
        margin:0;
        padding:0;
        font-size:.24rem;
    }
    span{
        display: inline-block;
    }
    html,body{
        height: 100%;
        font-size: 26.67vw;
    }
    #mj_weather{
        background: url(mj.jpg) no-repeat;
        background-size: 100%;
        height: 8.13rem;
    }
    .input_city{
        font-size:.12rem;
    }
    #city {
        width: 0.99rem;
        height: .25rem;
        margin-top: 0.34rem;
        margin-left: .43rem;
        font-size: .18rem;
        outline: none;
        border: none;
        background: #b8d6ee;
        padding-left: .08rem;
        border-radius: .02rem;
        line-height: .25rem;
        color: #0e2044;
    }
    .temperature {
        display: block;
        width: .9rem;
        height: .8rem;
        /* background: red; */
        margin-top: .45rem;
        margin-left: .2rem;
        font-size: 0.9rem;
        /* font-weight: 100; */
        color: #fff;
    }
    .weather{
        position: relative;
        top: -.64rem;
        left: 1.66rem;
        font-size: .2rem;
        color: #fff;
    }
    .wind_box{
        width: 1.7rem;
        height: .85rem;
        /* background: pink; */
        position: relative;
        top: .2em;
        left: .3rem;
    }
    .wind_direction{
        font-size: .16rem;
        color: #fff;
    }
    .wind_scale{
        font-size: .16rem;
        color: #fff;
    }
    .humidity {
        font-size: .16rem;
        color: #fff;
    }
    .update_time{
        font-size: .16rem;
        color: #fff;
        margin-top: .23rem;
    }
    .bottom_box{
        width: 100%;
        height: 0.7rem;
        position: relative;
        top: 3.94rem;
    }
    .today_temperature_range{
        font-size: .16rem;
        color: #fff;
        float: left;
        margin-top: .36rem;
        margin-left: .15rem;
    }
    .today_weather {
        font-size: .16rem;
        color: #fff;
        float: left;
        position: relative;
        top: .8em;
        /* left: .5rem; */
    }
    .tomorrow_temperature_range{
        font-size: .16rem;
        color: #fff;
        float: left;
        margin-top: .41rem;
        margin-left: .89rem;
        }
    .tomorrow_weather {
        font-size: .16rem;
        color: #fff;
        position: relative;
        top: .05rem;
        /* left: 0.3rem; */
        }
</style>

背景图

weixin_41466434

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
使用AJAX调用聚合数据模拟墨迹天气预报

一、获取数据聚合官网：https://www.juhe.cn/docs/index/otherid/1申请、注册、登录 —> 数据中心 —>我的接口可获得数据：1、AppKey( 此处为自己获得的key，每个人不同，一个账号免费用500次，我的用了243次了，有需要的小伙伴可以用我的 )0ff42dca1b07898e5d5dd29ea51dc6362、接口1...
复制链接

扫一扫