Obtenir JSON à partir de l'URL en JavaScript

Anika Tabassum Era 12 octobre 2023

JavaScript JavaScript JSON

Obtenir JSON à partir d’une URL à l’aide de jQuery
JSON à partir de l’URL par la méthode API Fetch
Utilisez XMLHttpRequest pour JSON à partir de l’URL

Obtenir JSON à partir de l'URL en JavaScript

Les formats JSON sont extraits d’une URL particulière. Les données peuvent être dans plusieurs formats et constituent l’une des formes les plus lisibles pour les humains et les ordinateurs.

Ici, nous allons discuter de trois façons de récupérer JSON à partir d’une URL et de l’utiliser en JavaScript.

Obtenir JSON à partir d’une URL à l’aide de jQuery

Habituellement, jQuery.getJSON(url, data, success) est la méthode de signature pour obtenir JSON à partir d’une URL. Dans ce cas, URL est une chaîne qui garantit l’emplacement exact des données, et data est juste un objet envoyé au serveur. Et si la requête aboutit, le statut passe par le success. Il existe une démonstration de code abrégé pour ce processus.

Extrait de code:

<!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>

Production :

jquery_for_json_url

JSON à partir de l’URL par la méthode API `Fetch`

Dans ce cas, la méthode fetch prend simplement l’ URL d’allocation du serveur de données et assure de retourner les données JSON.

Extrait de code:

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

Sortir:

récupérer_api_for_json_url

Utilisez `XMLHttpRequest` pour JSON à partir de l’URL

Ici, nous allons d’abord prendre l’URL dans une fonction avec une instance de XMLHttpRequest. Nous utiliserons la méthode open pour préparer la requête d’initialisation, et plus tard avec responseType définirons le type de réponse. Enfin, la méthode onload répondra à la requête et prévisualisera la sortie.

Extrait de code:

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