ajax请求获取天气,7. jquery-ajax请求天气接口

Ajax请求

查询天气

// 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

});

}