(注：没调样式，丑就丑吧)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XHR2</title>
<style>
table td,th{
border:1px solid #ccc;
}
</style>
</head>
<body>
<h1>天气查询</h1>
请输入你所要查询的城市： <input type="text" id="city" value="上海">
<button onclick="loadData()">查询</button>
<table id="box"></table>
<div id="box1"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
function loadData(){
var city=$("#city").val();
$.ajax({
url:"http://wthrcdn.etouch.cn/weather_mini",
type:"get",
data:{city:city},
success:function(res){
if(res.status==1000){
$("<thead>").html(`
<tr>
<th>当前城市</th>
<th>今日温度</th>
<th>最高温度</th>
<th>最底温度</th>
<th>风力</th>
<th>感冒</th>
</tr>
`).appendTo('#box');
$("<tbody>").html(`
<tr>
<td>${res.data.city}</td>
<td>${res.data.wendu}</td>
<td>${res.data.forecast[0].high}</td>
<td>${res.data.forecast[0].low}</td>
<td>${res.data.forecast[0].fengli}</td>
<td>${res.data.ganmao}</td>
</tr>
`).appendTo('#box');
}else{
$("#box1").html('查询失败请输入有效的城市名')
}
},
dataType:"json"
})
}
</script>
</body>
</html>
（注：ajax请求的时候可以把data省略，放在url里面一起发送）
url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
tianqi.png
