Question

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

{“结果”：“Bob Dylan，出生于Robert Allen Zimmerman，是美国人歌手兼作曲家，作家，诗人和画家，曾是一名专业人士五十年来流行音乐中的人物。迪伦的大部分都是着名的工作可以追溯到20世纪60年代，当时他成了一名.......“}

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

Answer 1

这是一个没有使用纯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.');
});

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

由于它是一个外部资源，因为Same origin policy，你需要使用JSONP。
为此，您需要添加查询字符串参数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

由于将从其他域调用所需页面，因此您需要返回 jsonp 而不是 json 。

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

Answer 7

使用 Robin Hartman 代码显示Json数据。您需要添加以下行。

他给出的代码为您提供了Object，object。此代码以更好的方式检索数据。

result.innerText =JSON.stringify(data);

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

7 个答案: