我有一个类似于https://www.googleapis.com/freebase/v1/text/en/bob_dylan的外部资源，它返回一个 JSON。我想在 html 的 div 中显示结果键的值（假设 div 的名称是“摘要”）。此外，结果键的值应以纯文本形式显示。
URL 返回 json：
{ "result": "鲍勃·迪伦 (Bob Dylan)，本名罗伯特·艾伦·齐默尔曼 (Robert Allen Zimmerman)，是美国创作歌手、作家、诗人和画家，五十年来一直是流行音乐界的重要人物。迪伦最著名的大部分作品都可以追溯到1960 年代，当他成为......”}
JSON 只有结果键，没有其他键
基本上我不想使用纯 HTML 和 JavaScript 以外的任何东西。我是 JavaScript 的相对初学者，因此我要求注释代码。
这是一个不使用纯 JavaScript 的 JQuery。我使用了 javascript promises 和 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.');
});
你可以像这样用 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);
但是源必须知道您希望它调用作为回调参数传递给它的函数。
使用 google 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);
检查将回调传递给 google api 时数据的样子：https : //www.googleapis.com/freebase/v1/text/en/bob_dylan? callback =insertReply
这是对 JSONP 的很好的解释：http : //en.wikipedia.org/wiki/JSONP
由于它是外部资源，因此您需要使用 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);
});
如果你想使用普通的 javascript，但避免Promise，你可以使用 Rami Sarieddine 的解决方案，但用这样的回调函数代替Promise：
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;
}
});
您可以使用 $.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;
}