JSON APIs and Ajax

標籤：osi   執行   json   tag   包括   data   改變   navig   script   

1.

通過jQuery來綁定點擊事件。

函數 $(document).ready()這個函數中的代碼只會在我們的頁面載入時候運行一次，確保執行js之前頁面所有的dom已經準備就緒。

在$(document).ready()函數中增加一個click事件。代碼如下：

$("#getMessage").on("click", function(){

});

2.

當你需要根據伺服器返回的資料來動態改變頁面的時候，應用程式介面(API)就派上用場了。

記住，API——應用程式介面(Application Programming Interface)是電腦之間相互交流溝通的工具。

許多網站的應用程式介面(API)都是通過一種稱為JSON格式的資料來傳輸的，JSON 是 JavaScript Object Notation的簡寫。

其實如果你曾經建立過JS對象的話，你就已經使用了這種資料格式，JSON是一種非常簡潔的資料格式。

它通常表現為了兩種形式，一種為單個對象，一種為多個對象

單個對象類似於：
{name:‘蓋倫‘,advantage:‘單挑無敵‘}

多個對象類似於：
[{name:‘蓋倫‘,advantage:‘單挑無敵‘},{name:‘諾克‘,advantage:‘上單霸主‘}]

每個對象屬性和屬性值的組合就是我們經常聽到的"索引值對(key-value pairs)"。

讓我們從之前的貓圖API拿取資料吧。

你應該在你的點擊事件中加入如下的代碼：

$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});

顯示結果：[{"id":0,"imageLink":"/images/funny-cat.jpg","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"/images/grumpy-cat.jpg","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"/images/mischievous-cat.jpg","codeNames":["The Doctor","Loki","Joker"]}]

3.

已經從JSON API中獲得了資料，現在把它們展現到我們的HTML頁面中吧。

這裡，我們使用.forEach()函數來迴圈遍曆JSON資料寫到htmll變數中。

首先我們定義一個HTML變數，
var html = ""; 。

然後，我們使用.forEach()函數來迴圈遍曆JSON資料寫到html變數中，最後把html變數顯示到我們的頁面中。

整個過程的代碼如下：

json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = ‘cat‘>";
keys.forEach(function(key) {
html += "<b>" + key + "</b>: " + val[key] + "<br>";
});
html += "</div><br>";
});

顯示結果：

id:0
imageLink:/images/funny-cat.jpg
codeNames:Juggernaut,Mrs. Wallace,Buttercup

id:1
imageLink:/images/grumpy-cat.jpg
codeNames:Oscar,Scrooge,Tyrion

id:2
imageLink:/images/mischievous-cat.jpg
codeNames:The Doctor,Loki,Joker

4.

從上節課獲得的JSON數組中，每個對象都包含了一個以imageLink為鍵(key)，以貓的圖片的url為值(value)的索引值對。

當我們在遍曆這些對象時，我們用imageLink的屬性來顯示img元素的圖片。

代碼如下：

html += "<img src = ‘" + val.imageLink + "‘>";

5.

如果我們不想把所有從JSON API中得到的圖片都展現出來，我們可以在遍曆之前做一次過濾。

我們把其中 "id" 鍵的值為1的圖片過濾掉。

代碼如下:

json = json.filter(function(val) {
return (val.id !== 1);
});

6.

我們還可以通過瀏覽器navigator獲得我們當前所在的位置geolocation。

位置的資訊包括經度longitude和緯度latitude。

你將會看到一個是否允許擷取當前位置的提示。不管你選擇允許或者禁止，只要代碼正確，這關就能過了。

如果你選擇允許，你將會看到右側手機輸出的文字為你當前所在位置的經緯度。

代碼如下：

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}

JSON APIs and Ajax