ajax异步请求阿里云天气api

最新推荐文章于 2024-07-01 16:26:20 发布

FlashCanSavetheWorld

最新推荐文章于 2024-07-01 16:26:20 发布

阅读量215

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45141428/article/details/111355355

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
<style>
    #info{
        background-color: skyblue;
        position: relative;
        left: 300px;
        width: 800px;
    }
    #ff{
        text-align: center;
    }
    img{
        width: 400px;
        height: 200px;
        align-self: center;
    }
</style>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<body>
<div>
    
</div>
<div id="data">  
    <div style="text-align: center;">
        <select id="city" style="width: 200px; text-align: center;">  
            <option value="2">北京市</option>  
            <option value="39">上海市</option>  
            <option value="52">重庆市</option>  
            <option value="2635">成都市</option>  
            <option value="284852">苏州市</option>  
            </select>  
            <input type="button" value="获取天气信息" id="btn">  
    </div>
<div id="info">
    <h1 style="text-align: center;">
        实时天气信息
    </h1>
</div>  
</div>  
<script type="text/javascript">
    //var aa={"code":0,"data":{"city":{"cityId":2,"counname":"中国","ianatimezone":"Asia/Shanghai","name":"北京市","pname":"北京市","secondaryname":"北京市","timezone":"8"},"limit":[{"date":"2020-12-17","prompt":"27"},{"date":"2020-12-18","prompt":"38"},{"date":"2020-12-19","prompt":"W"},{"date":"2020-12-20","prompt":"W"},{"date":"2020-12-21","prompt":"49"},{"date":"2020-12-22","prompt":"50"},{"date":"2020-12-23","prompt":"16"},{"date":"2020-12-24","prompt":"27"},{"date":"2020-12-25","prompt":"38"},{"date":"2020-12-26","prompt":"W"},{"date":"2020-12-27","prompt":"W"},{"date":"2020-12-28","prompt":"49"},{"date":"2020-12-29","prompt":"50"},{"date":"2020-12-30","prompt":"16"},{"date":"2020-12-31","prompt":"27"},{"date":"2021-01-01","prompt":"38"}]},"msg":"success","rc":{"c":0,"p":"success"}}
    $('#btn').click(function(){
        var id = $("#city").val();
        $.ajax({
        type: "POST",
        url: "http://freecityid.market.alicloudapi.com/whapi/json/alicityweather/briefforecast3days",
        data: {cityId: id ,token : '677282c2f1b3d718152c4e25ed434bc4'},//data中存放的是参数会自动拼接到url后面
        
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization","APPCODE 自己的APPCODE");
        },
        dataType:"JSON",
        success: function(res) {
            var tag ='';
            var day = res.data.forecast[0].updatetime;  
            var wea = res.data.forecast[0].conditionDay;
            var city = res.data.city.name;
            var tempa =res.data.forecast[0].tempDay;
            var tempb =res.data.forecast[0].tempNight;
            tag+= 
            '<div id ="ff"><img src = "sun.jpg"></div>'+
            '<div>'+  
            '<span>当前城市：'+city+'</span>'+  
            '<ul>'+  
            '<li>天气：'+wea+'</li>'+  
            '<li>更新时间：'+day+'</li>'+  
            '<li>日间气温：'+tempa+'</li>'+  
            '<li>晚间气温：'+tempb+'</li>'+  
            '</ul>'+  
            '</div>';  
            $("#info").append(tag);
            // alert(res.data.city.name)
            //alert(JSON.stringify(data));
        },

        error : function(e) {
            alert("网络异常，请重试");
        }
       
    });
    })
    
    //alert(JSON.stringify(aa))
</script>
</body>
</html>

FlashCanSavetheWorld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax异步请求阿里云天气api

<!DOCTYPE html><html><head> <title>test</title><style> #info{ background-color: skyblue; position: relative; left: 300px; width: 800px; } #ff{ text-align: center
复制链接

扫一扫

专栏目录