HOWTO · JavaScript

Holen Sie sich JSON von URL in JavaScript

Um ein JSON von einer URL zu erhalten, können wir JQuery, Fetch API und auch XMLHttpRequest verwenden. Jede der Methoden ist geeignet und zeigt das Ergebnis brauchbar an.

Von Anika Tabassum EraVeröffentlicht 2022-03-18Aktualisiert 2023-10-12

Auf dieser Seite

JSON-Formate werden von einer bestimmten URL abgerufen. Daten können in mehreren Formaten vorliegen und sind eine der am besten lesbaren Formen für Menschen und Computer.

Hier werden wir drei Möglichkeiten zum Abrufen von JSON aus der URL und zur Verwendung in JavaScript diskutieren.

Abrufen von JSON aus einer URL mit jQuery

Normalerweise ist jQuery.getJSON(url, data, success) die Signaturmethode, um JSON von einer URL zu erhalten. In diesem Fall ist die URL eine Zeichenfolge, die den genauen Standort von Daten sicherstellt, und data ist nur ein Objekt, das an den Server gesendet wird. Und wenn die Anfrage erfolgreich ist, kommt der Status durch den Erfolg. Es gibt eine Kurzcode-Demonstration für diesen Prozess.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
  <title>JS Bin</title>
</head>
<body>
<div class="display"></div>
  <script>

  $.getJSON('https://jsonplaceholder.typicode.com/todos/1', function(data){
    var display = `User_ID: ${data.userId}<br>
                   ID: ${data.id}<br>
                   Title: ${data.title}<br>
                   Completion_Status: ${data.completed}`
    $(".display").html(display);
  });
  </script>
</body>
</html>

Ausgabe:

jquery_for_json_url

JSON von URL durch `Fetch`-API-Methode

Die Methode fetch nimmt in diesem Fall einfach die URL zur Zuordnung des Datenservers und sorgt für die Rückgabe der JSON-Daten.

Code-Auszug:

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(result => result.json())
    .then((output) => {
      console.log('Output: ', output);
    })
    .catch(err => console.error(err));

Ausgabe:

fetch_api_for_json_url

Verwendung von `XMLHttpRequest` für JSON From URL

Hier nehmen wir zuerst die URL in eine Funktion mit einer Instanz von XMLHttpRequest. Wir werden die Methode open verwenden, um die initialisierende Anfrage vorzubereiten, und später mit responseType den Antworttyp definieren. Schließlich antwortet die Methode onload auf die Anfrage und zeigt eine Vorschau der Ausgabe an.

Code-Auszug:

var getJSON = function(url, callback) {
  var xmlhttprequest = new XMLHttpRequest();
  xmlhttprequest.open('GET', url, true);
  xmlhttprequest.responseType = 'json';

  xmlhttprequest.onload = function() {
    var status = xmlhttprequest.status;

    if (status == 200) {
      callback(null, xmlhttprequest.response);
    } else {
      callback(status, xmlhttprequest.response);
    }
  };

  xmlhttprequest.send();
};

getJSON('https://jsonplaceholder.typicode.com/todos/1', function(err, data) {
  if (err != null) {
    console.error(err);
  } else {
    var display = `User_ID: ${data.userId}
ID: ${data.id}
Title: ${data.title} 
Completion_Status: ${data.completed}`;
  }
  console.log(display);
});