ajax调取数据，搜索天气预报_ajax 天气数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/82689947

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .span{
            color: black;
            font-size: 16px;
        }
        .div_div{
            color: blue;
            font-size: 20px;
            margin-left: 10px;
        }
        .div{
            color: red;
            font-size: 20px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="div">

</div>


<div id="box">

</div>

<input type="text" id="ipt">
<button id="btn">点击按钮</button>
</body>

</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script>

    function fn(id){
        $.ajax({
            url:'https://www.apiopen.top/weatherApi?city='+id,
            type:'post',
            dataType:'json',
            success:function (data) {
                console.log(data.data);
                var arr=data.data;
                var str=data.data.yesterday;
                console.log(str);

                $('#div').append('<div class="div"><span class="span">城市地点为</span>'+arr.city+'</div>'
                    +'<div class="div_div"><span class="span">天气情况</span>'+arr.ganmao+'</div>');

                    $('#box').append('<div class="div"><span class="span">最高气温</span>'+str.high+'</div>'+
                        '<div class="div_div"><span class="span">最低气温</span>'+str.low+'</div>'+
                        '<div class="div_div"><span class="span">云的厚度</span>'+str.type+'</div>'+
                        '<div class="div_div"><span class="span">空气风向</span>'+str.fx+'</div>')

            }
        })
    }

    $('#btn').click(function () {
        var va=$('#ipt').val();
        fn(va);

    });

    $.ajax({
        url:'http://localhost:3000/item/logo',
        type:'get  ',
        dataType:'json',
        success:function(data){
            console.log(data)
            for(i in data){
                $('#div').append('<div></div>')
            }


        }
    })

</script>