从外部URL获取JSON数据并将其作为纯文本显示在div中

Question

我有一个类似于https://www.googleapis.com/freebase/v1/text/en/bob_dylan的外部资源,它返回一个JSON.我想在html中的div中显示结果键的值(假设div的名称是"summary").结果键的值也应以纯文本显示.
URL返回json:

{"结果":"鲍勃·迪伦,出生于罗伯特·艾伦·齐默尔曼,是美国创作歌手,作家,诗人和画家,五十年来一直是流行音乐界的重要人物.迪伦最着名的作品大部分来自于20世纪60年代,当他成为......."}

JSON只有结果键,没有其他键
基本上我不想使用除纯HTML和JavaScript之外的任何东西.我是JavaScript的初学者,因此我要求注释代码.

Answer 1

这是一个没有使用纯JavaScript的JQuery.我使用了javascript promises和XMLHttpRequest你可以在这个小提琴上试试

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 2

您可以使用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);

但是source必须知道你希望它将函数作为回调参数传递给它.

使用谷歌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

Answer 3

因为它是一个外部资源,所以你需要使用JSONP,因为相同的原始策略.
为此,您需要添加querystring参数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 4

如果你想使用普通的 javascript，但避免承诺，你可以使用 Rami 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;
  }
});