web-dev-qa-db-fra.com

Obtenir des données JSON à partir d'une URL externe et les afficher dans un div en texte brut

J'ai une ressource externe similaire à https://www.googleapis.com/freebase/v1/text/en/bob_dylan qui renvoie un JSON. Je veux afficher la valeur de la clé de résultat dans un div en HTML (disons que le nom du div est "summary"). De plus, la valeur de la clé de résultat doit être affichée en texte brut.
L'URL renvoie le json:

{"result": "Bob Dylan, né Robert Allen Zimmerman, est un auteur-compositeur-interprète, auteur, poète et peintre américain, qui est une figure majeure de la musique populaire depuis cinq décennies. Une grande partie de son œuvre la plus célèbre date de Dans les années 1960, quand il est devenu ....... "}

Le JSON a juste la clé de résultat, pas d'autres clés
En gros, je ne veux utiliser que du HTML et du JavaScript simples. Je suis un débutant relatif à JavaScript et, par conséquent, je demande un code commenté.

javascripthtmljson
38
Dr narendra thorat

Vous pouvez faire cela avec JSONP comme ceci:

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);

Mais la source doit savoir que vous souhaitez appeler une fonction transmise en tant que paramètre de rappel.

Avec Google API, cela ressemblerait à ceci:

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);

Vérifiez à quoi ressemblent les données lorsque vous transmettez le rappel à Google Api: https://www.googleapis.com/freebase/v1/text/fr/bob_dylan?callback=insertReply

Voici une très bonne explication de JSONP: http://en.wikipedia.org/wiki/JSONP

25
Xavier

En voici une sans utiliser JQuery avec du JavaScript pur. J'ai utilisé les promesses javascript et XMLHttpRequest Vous pouvez l'essayer ici sur ce violon

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

Comme il s’agit d’une ressource externe, vous devez utiliser JSONP en raison de la règle politique de même origine .
Pour cela, vous devez ajouter le paramètre de chaîne de requête 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

Si vous voulez utiliser du javascript simple, tout en évitant les promesses, vous pouvez utiliser la solution de Rami Sarieddine, mais remplacez la promesse par une fonction de rappel comme celle-ci:

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();
};

Et vous l'appelleriez comme ceci:

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

Vous pouvez utiliser l'appel $ .ajax pour obtenir la valeur, puis la placer dans la division de votre choix. Une chose que vous devez savoir, c'est que vous ne pouvez pas recevoir de données JSON. Vous devez utiliser JSONP.

Le code serait comme ceci:

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