Получать данные JSON из внешнего URL-адреса и отображать его в div как обычный текст

У меня есть внешний ресурс, похожий на https://www.googleapis.com/freebase/v1/text/en/bob_dylan, который возвращает JSON. Я хочу показать значение ключа результата в div в html (допустим, имя div является "summary" ). Также значение ключа результата должно отображаться в виде простого текста.
URL-адрес возвращает json:

{ "result": "Боб Дилан, рожденный Роберт Аллен Циммерман, является американцем певец-автор песен, автор, поэт и художник, который был главным фигура в популярной музыке в течение пяти десятилетий. Большая часть Дилана больше всего знаменитые работы датируются 60-ми годами, когда он стал......." }

JSON имеет только ключ результата, никаких других ключей
В принципе, я не хочу использовать ничего, кроме простого HTML и JavaScript. Я относительный новичок в JavaScript и поэтому прошу прокомментировать код.

Ответ 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);

Но источник должен знать, что вы хотите, чтобы он вызывал функцию, переданную ему как параметр обратного вызова.

С 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

Ответ 2

Вот один без использования JQuery с чистым JavaScript. Я использовал 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.');
});

Ответ 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);
});

Ответ 4

Если вы хотите использовать простой javascript, но избегайте promises, вы можете использовать решение 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;
  }
});

Ответ 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;
}

Ответ 6

Поскольку желаемая страница будет вызываться из другого домена, вам нужно вернуть jsonp вместо json.

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

Ответ 7

Чтобы отобразить данные Json с помощью кода Робин Хартман. Вам нужно добавить строку ниже.

Код, который он дал, дает объект Object, object. этот код лучше извлекает данные.

result.innerText =JSON.stringify(data);