<body>
<input type="text" name="city" placeholder="请输入城市">
<button onclick="getWeather()">查询天气</button>
<p class="city"></p>
<p class="temperature"></p>
<p class="weather"></p>
<p class="wind"></p>
<p class="pm"></p>
<script>
// Ajax请求：一般在刷新页面中的局部数据时，会使用ajax请求。该请求不会去重新刷新或请求这个页面中的所有数据，而只是动态的修改一部分数据。
function getWeather() {
// 通过ajax向天气接口发送请求
// $.get('url', '请求成功之后的回调函数');
// $.post('url', 'POST参数', '请求成功之后的回调函数');
$.ajax({
// 请求地址
// val()获取输入框中的内容。
url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + $('input').val() + '&output=json&ak=TueGDhCvwI6fOrQnLM0qmXxY9N0OkOiQ&callback=?',
// 请求类型：GET/POST
type: 'GET',
// 请求参数，是一个字符串。
// data: '',
// 指定服务器返回的数据类型
dataType: 'json',
// 指定请求失败的回调函数
error: function (data, status) {
console.log('请求失败：', status, data);
},
// 请求成功的回调函数
success: function (data, status) {
// 请求成功，得到json数据，解析json数据，将数据展示到页面中。
console.log('请求成功：', data);
var result = data['results'][0];
var current_city = result['currentCity'];
var pm25 = result['pm25'];
var weather_data = result['weather_data'][0];
var weather = weather_data['weather'];
var wind = weather_data['wind'];
var tem = weather_data['temperature'];
// 通过js给p标签赋值
$('.city').text(current_city);
$('.pm').text(pm25);
$('.weather').text(weather);
$('.wind').text(wind);
$('.temperature').text(tem);
},
// 发起请求的方式：同步(false)还是异步(true)
async: true
});
}
</script>
</body>