ajax实现天气预报查询系统!JS部分是通过原生的语法和JQ语法混写的。
演示图
Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天气预报</title>
<style>
table {
margin: 0 auto;
margin-top: 30px;
color: aliceblue;
border: 1px white solid;
text-align: center;
width: 800px;
font-family: "微软雅黑";
font-size: 20px;
}
table tr {
height: 60px;
}
body {
background: url("https://api.ixiaowai.cn/gqapi/gqapi.php");
}
.svip {
margin-left: 50%;
transform: translateX(-79%);
margin-top: 70px;
overflow: hidden;
border: 1px solid white;
background: #ffa50000;
color: aliceblue;
outline: none;
width: 500px;
height: 30px;
}
* {
margin: 0;
padding: 0;
}
.vip {
border: none;
width: 150px;
height: 32px;
cursor: pointer;
background: #ffffff;
color: darkorange;
outline: none;
z-index: 99;
position: absolute;
left: 343px;
top: 70px;
transition: 0.3s;
}
.vip:hover {
background: #c9ff05;
}
p {
text-align: center;
color: aliceblue;
font-size: 18px;
margin-top: 20px;
}
b {
text-align: center;
color: aliceblue;
font-size: 18px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 27px;
font-size: 30px;
}
.jiu {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
left: 750px;
top: 14px;
}
</style>
</head>
<body>
<b class="title">欢迎访问肖虎威天气查询系统!</b>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>日期</td>
<td>天气</td>
<td>最高温</td>
<td>最低温</td>
<td>风向</td>
</tr>
</thead>
<tbody></tbody>
<div class="jiu">
<input
type="text"
name="地区"
placeholder="请输入您要查询的城市!"
class="svip"
/>
<button value="查询" class="vip">查询</button>
</div>
</table>
<p class="diqu">以上为武汉近5日的天气!</p>
<p class="tips">欢迎使用~</p>
<script src="jquery-1.12.4.min.js"></script>
</body>
</html>
JS部分
<script>
$(function() {
var tips;
$.ajax({
//加载天气资源接口
url: "https://www.apiopen.top/weatherApi?city=武汉", //天气接口
success: function(res) {
//接收成功返回!
if (res.code === 200) {
//200为状态码表示成功
var tr = ""; //定义一个空的用来接收接受后面的变量
for (var i = 0; i < res.data.forecast.length; i++) {
//走循环,小于接口数据中forecast集合的长度
tr += "<tr class='skt'>"; //创建一行的行头
tr += "<td>" + res.data.forecast[i].date + "</td>"; //追加第一个列
tr += "<td>" + res.data.forecast[i].type + "</td>"; //追加第二个列
tr += "<td>" + res.data.forecast[i].high + "</td>"; //追加第三个列
tr += "<td>" + res.data.forecast[i].low + "</td>"; //追加第四个列
tr += "<td>" + res.data.forecast[i].fengxiang + "</td>"; //追加第五个列
tr += "</tr>"; //创建第一个行尾
}
$("tbody").append(tr); //将创建好的一行添加到表格的子元素
$(".tips")[0].innerHTML = "温馨提示您:" + res.data.ganmao + ""; //动态修改提示语部分
} else {
alert("数据请求失败"); //当请求失败时 弹出框
}
}
});
});
$(".vip").click(function() {
//定义查询按钮函数
var wz = `https://www.apiopen.top/weatherApi?city=${
$(".svip")[0].value
}`; //字符串拼接(用户输入值)
$(".diqu")[0].innerHTML =
"以上为" + $(".svip")[0].value + "近5日的天气!"; //动态修改提示语地区部分
$.ajax({
url: wz, //再次调用拼接后的天气接口
success: function(res) {
//成功后的定义函数
del(); //执行删除前面一个城市的数据
if (res.code === 200) {
//200为状态码表示成功
var tr = ""; //定义一个空的用来接收接受后面的变量
for (var i = 0; i < res.data.forecast.length; i++) {
//走循环,小于接口数据中forecast集合的长度
tr += "<tr class='skt'>"; //创建一行的行头
tr += "<td>" + res.data.forecast[i].date + "</td>"; //追加第一个列
tr += "<td>" + res.data.forecast[i].type + "</td>"; //追加第二个列
tr += "<td>" + res.data.forecast[i].high + "</td>"; //追加第三个列
tr += "<td>" + res.data.forecast[i].low + "</td>"; //追加第四个列
tr += "<td>" + res.data.forecast[i].fengxiang + "</td>"; //追加第五个列
tr += "</tr>"; //创建一行的行尾
}
$("tbody").append(tr); //将创建好的一行添加到表格的子元素
$(".tips")[0].innerHTML = "温馨提示您:" + res.data.ganmao + ""; //动态修改提示语部分
} else {
alert("输入城市有误,请重新输入!"); //当请求失败时 弹出框
}
}
});
});
function del() {
//定义删除上一个城市数据的函数
$(".skt").remove();
} //获取所有带skt的class将其remove掉
</script>
感谢分享!总算是能够简单的使用一次接口了.....(感觉你博文里面的很多例子都很赞啊,引导我快速上手实践了
有几个地方可以优化一下:1.没必要多次去调用ajax
2.第二次请求ajax else返回的是城市输入有误,这个感觉不对的哇....要么去判断一下用户输入的内容是否为汉字是否为空,要么直接判断接口返回值msg是否为"未获取到相关数据!"
emmm.....好像还是得调用两次ajax我傻屌了....
哈哈哈 加油加油