當(dāng)你需要根據(jù)服務(wù)器返回的數(shù)據(jù)來動態(tài)改變頁面的時(shí)候，應(yīng)用程序接口(API)就派上用場了。

記住，API——應(yīng)用程序接口(Application Programming Interface)是計(jì)算機(jī)之間相互交流溝通的工具。

許多網(wǎng)站的應(yīng)用程序接口(API)都是通過一種稱為JSON格式的數(shù)據(jù)來傳輸?shù)?#xff0c;JSON 是 JavaScript Object Notation的簡寫。

其實(shí)如果你曾經(jīng)創(chuàng)建過JS對象的話，你就已經(jīng)使用了這種數(shù)據(jù)格式，JSON是一種非常簡潔的數(shù)據(jù)格式。

它通常表現(xiàn)為了兩種形式，一種為單個(gè)對象，一種為多個(gè)對象

單個(gè)對象類似于：
{name:'蓋倫',advantage:'單挑無敵'}

多個(gè)對象類似于：
[{name:'蓋倫',advantage:'單挑無敵'},{name:'諾克',advantage:'上單霸主'}]

每個(gè)對象屬性和屬性值的組合就是我們經(jīng)常聽到的"鍵值對(key-value pairs)"。

讓我們從之前的貓圖API拿取數(shù)據(jù)吧。

你應(yīng)該在你的點(diǎn)擊事件中加入如下的代碼：

<script>$(document).ready(function() {$("#getMessage").on("click", function(){// 請把你的代碼寫在這條注釋以下$.getJSON("/json/cats.json", function(json) {$(".message").html(JSON.stringify(json)); });// 在這之后，點(diǎn)擊"Get Message"按鈕。你的Ajax函數(shù)將把文字"The message will go here"替換成此從FreeCodeCam的貓圖API中獲得的原始JSON數(shù)據(jù)。// 請把你的代碼寫在這條注釋以上 });}); </script><div class="container-fluid"><div class = "row text-center"><h2>Cat Photo Finder</h2></div><div class = "row text-center"><div class = "col-xs-12 well message">The message will go here</div></div><div class = "row text-center"><div class = "col-xs-12"><button id = "getMessage" class = "btn btn-primary">Get Message</button></div></div> </div>

?

我們已經(jīng)從JSON API中獲得了數(shù)據(jù)，現(xiàn)在把它們展現(xiàn)到我們的HTML頁面中吧。

這里，我們使用.forEach()函數(shù)來循環(huán)遍歷JSON數(shù)據(jù)寫到htmll變量中。

首先我們定義一個(gè)HTML變量，
var html = ""; 。

然后，我們使用.forEach()函數(shù)來循環(huán)遍歷JSON數(shù)據(jù)寫到html變量中，最后把html變量顯示到我們的頁面中。

整個(gè)過程的代碼如下：

$.getJSON("/json/cats.json", function(json) {var 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>";});// 請把你的代碼寫在這條注釋以上

提示：示例中難點(diǎn)在于兩個(gè)forEach循環(huán)，而且里面夾雜有字符串拼接，這是最頭疼也最容易出錯的地方

轉(zhuǎn)載于:https://www.cnblogs.com/geshangjing/p/8093274.html

總結(jié)

以上是生活随笔為你收集整理的Get JSON with the jQuery getJSON Method的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。