web-dev-qa-db-ja.com

外部URLからJSONデータを取得し、divにプレーンテキストとして表示します

JSONを返す https://www.googleapis.com/freebase/v1/text/en/bob_dylan に類似した外部リソースがあります。結果キーの値をhtmlのdivに表示します（divの名前が「summary」であるとしましょう）。また、結果キーの値はプレーンテキストで表示する必要があります。
URLはjsonを返します。

{"結果"： "ロバートアレンツィンマーマン生まれのボブディランは、アメリカのシンガーソングライター、作家、詩人、画家であり、50年にわたってポピュラー音楽の主要人物でした。ディランの最も有名な作品の多くは1960年代、彼が.......になったとき」}

JSONには結果キーのみがあり、他のキーはありません
基本的に、プレーンHTMLとJavaScript以外のものは使いたくありません。私はJavaScriptに比較的初心者なので、コメント付きのコードをお願いします。

javascripthtmljson
38
Dr narendra thorat

次のように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

25
Xavier

これは、純粋なJavaScriptでJQueryを使用しないものです。 JavaScriptのプロミスと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.');
});
30
Rami Sarieddine

外部リソースであるため、 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);
});
10
Sani Singh Huttunen

単純な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;
  }
});
3
Robin Hartmann

$ .ajax呼び出しを使用して値を取得し、それを目的のdivに入れることができます。知っておくべきことの1つは、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;
}
2
Shahriar