从外部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);