上课讲的顺序大概是这样
- 第一步 天气的网页需要一个
前端后端，但是后端我们并没有可以得到的数据，就去数据平台拿到一个API接口(意思就是去网站上拿到一个传送过来的后端数据比如上游戏，前端就是游戏软件（王者荣耀），但是只有前端游戏是不能玩的，必须有实时传送的后端数据发送上来才能玩。所以后端数据就是直接去https://tianqiapi.com/注册一个账号，然后拿到"https://v0.yiketianqi.com/free/week?appid=83487365&appsecret=OtWHp55p&city="
这样的一个接口,这样后端的数据就搞定了。 - 第二步 前端与后端的连接，我们依旧依靠
ajax这个数据传递中枢来发送这个数据，第一步就是引入jQuery库,作用就是利用这个库可以简化JavaScript的代码，快速做出具有交互性和动态性的网页。引入之后继续写代码（每行代码都有注释仔细看）
可以跳过style标签内容
主要看body标签里的内容
整合之后的天气查询网站jsp页面如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--定义页面编码格式为UTF-8-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<!--引入jQuery库-->
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
body {
background-image: url("images/1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/设置整个天气展示容器的样式/
#container{
width: 800x; /* 设置div块的宽度 /
height: 300px; / 设置div块的高度 /
background-color: rgba(255,255,255, 0.5); / 设置透明黑色背景 /
border-radius: 15px; / 设置圆角 */
margin-top: 50px;
}
/*设置每个天气展示div的样式*/
#container div{
float:left;
width:14.2%
}
h1{
font-size:14px
}
h2{
font-size:10px
}
/*设置输入框样式*/
input{
position: absolute; /* 设置绝对定位 */
left: 50%; /* 设置左侧偏移量为50% */
text-align: center;
transform: translate(-80%, -110%); /* 将输入框水平和垂直方向上移动到中心位置 */
width: 200px; /* 设置输入框宽度 */
height: 30px; /* 设置输入框高度 */
border: none; /* 取消边框 */
border-radius: 13px; /* 设置圆角 */
background-color: #f2f2f2; /* 设置背景颜色 */
}
/*设置查询按钮样式*/
button{
position: absolute; /* 设置绝对定位 */
left: 60%; /* 设置左侧偏移量为50% */
transform: translate(-50%, -110%); /* 将输入框水平和垂直方向上移动到中心位置 */
width: 70px; /* 设置输入框宽度 */
height: 30px; /* 设置输入框高度 */
border: none; /* 取消边框 */
border-radius: 13px; /* 设置圆角 */
background-color: #47a0fc;
font-size: 4px;
margin-left:50px;
}
</style>
</head>
<body>
<!--输入城市名称的输入框-->
<input type="text" placeholder="请输入城市（不能带市和区）" id="city">
<!--查询按钮-->
<button onclick="fun()">查询</button>
<!--天气展示容器-->
<div id="container">
</div>
<!--Ajax请求天气数据并展示-->
<script type="text/javascript">
function fun(){
//1、获取输入框的城市名
var city = $("#city")[0].value;
//2、通过ajax请求后端 获取天气 后端是由第三方提供的
$.ajax({
url:"https://v0.yiketianqi.com/free/week？appid=83487365&appsecret=OtWHp55p&city="+city,
type:"get",
dataType:"json",
success:function(res){
//清空天气展示容器
$("#container")[0].innerHTML="";
console.log(res);
var data = res.data;
for(var i=0;i<data.length;i++){
//创建展示天气的div
var div = document.createElement("div");
//创建展示日期的h1标签
//`document.createElement` 这个是个方法，创建内容的方法
var h1 = document.createElement("h1");
h1.innerText=data[i].date;
//将获取到的天气数据中的日期赋值给h1标签的innerText属性，从而将日期展示在页面上。其中，data[i].date表示获取到的天气数据中的日期信息。
div.appendChild(h1);
//将创建的h1标签添加到展示天气的div中，从而将日期展示在页面上。其中，div表示创建的展示天气的div，h1表示创建的展示日期的h1标签。通过调用appendChild()方法，将h1标签添加到div中。
//（以下的5个数据引入与1同理 cv工程师即可）创建展示天气情况的h2标签
var h2 = document.createElement("h2");
h2.innerText=data[i].wea;
div.appendChild(h2);
//创建展示天气情况图片的img标签
var img = document.createElement("img");
img.src="images/"+data[i].wea_img+".png";
div.appendChild(img);
//创建展示最低气温的h2标签
var h3 = document.createElement("h2");
h3.innerText="最低气温"+data[i].tem_day+"℃";
div.appendChild(h3);
//创建展示最高气温的h2标签
var h4 = document.createElement("h2");
h4.innerText="最低气温"+data[i].tem_night+"℃";
div.appendChild(h4);
//创建展示风向的h2标签
var h5 = document.createElement("h2");
h5.innerText=data[i].win;
div.appendChild(h5);
//创建展示风力等级的h2标签
var h6 = document.createElement("h2");
h6.innerText="风级"+data[i].win_speed;
div.appendChild(h6);
//将展示天气的div添加到天气展示容器中
$("#container")[0].appendChild(div);
}
}
})
}
</script>
</body>
</html>