Aip地址
后端地址:http://wthrcdn.etouch.cn/WeatherApi
请求方法:POST或GET
接口参数:city:string
xhr.open('POST', 'http://wthrcdn.etouch.cn/WeatherApi?city=' + document.querySelector(".inputWeather").value);
天气查询
<!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
喜欢就支持一下吧