從外部URL獲取JSON數據並以純文本形式顯示在div中

Question

我有一個類似於https://www.googleapis.com/freebase/v1/text/en/bob_dylan的外部資源，它返回一個JSON。我想在html中顯示結果鍵值（可以說div的名稱是「summary」）。結果鍵的值也應以純文本顯示。
的URL返回JSON：

{「結果」：「鮑勃·迪倫，出生羅伯特艾倫齊默曼，是美國 的創作型歌手，作家，詩人和畫家，誰是一個重大 人物在流行音樂爲五個十年。大部分從20世紀60年代，迪倫最 著名作品的日期，當他成爲一個.......」}

的JSON剛剛結果的關鍵，沒有其他的按鍵
基本上我不想使用純HTML和JavaScript以外的任何東西。我是JavaScript的初學者，因此我要求提供註釋代碼。

Answer 1

你可以用JSONP做到這一點是這樣的：

function insertReply(content) { 
    document.getElementById('output').innerHTML = content; 
} 

// create script element 
var script = document.createElement('script'); 
// assing src with callback name 
script.src = 'http://url.to.json?callback=insertReply'; 
// insert script to document and load content 
document.body.appendChild(script); 

但源必須意識到，你想它來調用回調參數傳遞給它的功能。

與谷歌API就應該是這樣的：

function insertReply(content) { 
    document.getElementById('output').innerHTML = content; 
} 

// create script element 
var script = document.createElement('script'); 
// assing src with callback name 
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply'; 
// insert script to document and load content 
document.body.appendChild(script); 

檢查數據如何看起來當你通過回調到谷歌的API，如： https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

這裏是JSONP的相當不錯解釋：http://en.wikipedia.org/wiki/JSONP

Answer 2

由於這是一個外部資源，您需要使用JSONP，因爲Same origin policy。
要做到這一點，你需要添加查詢參數callback：

$.getJSON("http://myjsonsource?callback=?", function(data) { 
    // Get the element with id summary and set the inner text to the result. 
    $('#summary').text(data.result); 
}); 

Answer 3

由於所需的頁面會從不同的域叫你需要返回JSONP代替JSON的。

$.get("http://theSource", {callback : "?" }, "jsonp", function(data) { 
    $('#summary').text(data.result); 
}); 

Answer 4

您可以使用$ .ajax調用來獲取該值，然後將其放入您想要的div。你必須知道的一件事是你無法接收JSON數據。你必須使用JSONP。

代碼將是這樣的：

function CallURL() { 
    $.ajax({ 
     url: 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan', 
     type: "GET", 
     dataType: "jsonp", 
     async: false, 
     success: function(msg) { 
      JsonpCallback(msg); 
     }, 
     error: function() { 
      ErrorFunction(); 
     } 
    }); 
} 

function JsonpCallback(json) { 
    document.getElementById('summary').innerHTML = json.result; 
} 

Answer 5

這裏是一個沒有使用JQuery使用純JavaScript。我使用的JavaScript的承諾和XMLHttpRequest的 在這裏你可以試試這個fiddle

HTML

<div id="result" style="color:red"></div> 

的JavaScript

var getJSON = function(url) { 
    return new Promise(function(resolve, reject) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('get', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     resolve(xhr.response); 
     } else { 
     reject(status); 
     } 
    }; 
    xhr.send(); 
    }); 
}; 

getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan').then(function(data) { 
    alert('Your Json result is: ' + data.result); //you can comment this, i used it to debug 

    result.innerText = data.result; //display the result in an HTML element 
}, function(status) { //error detection.... 
    alert('Something went wrong.'); 
}); 

Answer 6

如果你想使用普通的JavaScript，但要避免的承諾，你可以使用拉米Sarieddine的解決方案，但用這樣的回調函數替代承諾：

var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('get', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     callback(null, xhr.response); 
     } else { 
     callback(status); 
     } 
    }; 
    xhr.send(); 
}; 

而你也這樣稱呼它：

getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan', function(err, data) { 
    if (err != null) { 
    alert('Something went wrong: ' + err); 
    } else { 
    alert('Your Json result is: ' + data.result); 
    result.innerText = data.result; 
    } 
}); 

Answer 7

要顯示使用羅賓·哈特曼代碼JSON數據。您需要添加下面的行。

他給出的代碼給了你Object，object。此代碼以更好的方式檢索數據。

result.innerText =JSON.stringify(data);