Holen Sie sich JSON von URL in JavaScript

Anika Tabassum Era 12 Oktober 2023

JavaScript JavaScript JSON

Abrufen von JSON aus einer URL mit jQuery
JSON von URL durch Fetch-API-Methode
Verwendung von XMLHttpRequest für JSON From URL

Holen Sie sich JSON von URL in JavaScript

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