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

});

}

總結

以上是生活随笔為你收集整理的ajax请求获取天气,7. jquery-ajax请求天气接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。