查询天气API　Ajax实例　　POST请求-瘦子-瘦子Blog-瘦子LOG

Aip地址　　

后端地址：http://wthrcdn.etouch.cn/WeatherApi

请求方法：POST或GET

接口参数：city：string

xhr.open('POST', 'http://wthrcdn.etouch.cn/WeatherApi?city=' + document.querySelector(".inputWeather").value);

查询天气API　Ajax实例　　POST请求

天气查询

<!DOCTYPE html>
<html lang="CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询天气API　Ajax实例　　POST请求</title>
    <style>
        li {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <h2>天气查询</h2>
    <input class="inputWeather" type="text" name="" id="" placeholder="请输入你要查询的城市">
    <input type="button" name="" id="" value="用过ajax获取xml数据">
    <ul class="weather-box">

    </ul>
    <script>
        document.getElementsByTagName("input")[1].onclick = function () {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://wthrcdn.etouch.cn/WeatherApi?city=' + document.querySelector(".inputWeather").value);
            xhr.onload = function () {
                var result = xhr.responseXML;
                console.log(result);
                makeLi("城市:" + result.querySelector("city").innerHTML);
                makeLi("穿衣指数:" + result.querySelector("zhishu").innerHTML);
                for (let i = 0; i < result.querySelectorAll("weather").length; i++) {
                    makeLi("日期:" + result.querySelectorAll("weather")[i].querySelector("date").innerHTML);
                    makeLi("天气:" + result.querySelectorAll("weather")[i].querySelector("type").innerHTML);
                    makeLi("最高温:" + result.querySelectorAll("weather")[i].querySelector("high").innerHTML);
                    makeLi("最低温:" + result.querySelectorAll("weather")[i].querySelector("low").innerHTML);
                }

            }
            xhr.send(null)
        }
        function makeLi(info) {
            var ceartLi = document.createElement("li");
            ceartLi.innerHTML = info;
            document.querySelector(".weather-box").appendChild(ceartLi);
        }
    </script>
</body>

</html>

文章版权归作者所有，未经允许请勿转载。

THE END

Ajax 代码接口
# 代码

查询天气API Ajax实例 POST请求

天气查询

查询天气API　Ajax实例　　POST请求