從外部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，但是避免使用promises，你可以使用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;
  }
});

Answer 5

您可以使用$ .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 6

使用Robin Hartman代碼顯示Json數據。 您需要添加以下行。

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

result.innerText =JSON.stringify(data);

Answer 7

由於將從不同的域調用所需的頁面，您需要返回jsonp而不是json 。

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