Holen Sie sich JSON von URL in JavaScript
- Abrufen von JSON aus einer URL mit jQuery
-
JSON von URL durch
Fetch-API-Methode -
Verwendung von
XMLHttpRequestfür JSON From URL
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:
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:
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);
});
Ausgabe:
