在 JavaScript 中從 URL 獲取 JSON

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 使用 jQuery 從 URL 獲取 JSON
  2. 通過 Fetch API 方法從 URL 獲取 JSON
  3. 對來自 URL 的 JSON 使用 XMLHttpRequest
在 JavaScript 中從 URL 獲取 JSON

JSON 格式是從特定的 URL 中獲取的。資料可以有多種格式,是人類和計算機可讀性最強的形式之一。

在這裡,我們將討論從 URL 中檢索 JSON 並在 JavaScript 中使用它的三種方法。

使用 jQuery 從 URL 獲取 JSON

通常,jQuery.getJSON(url, data, success) 是從 URL 獲取 JSON 的簽名方法。在這種情況下,URL 是確保資料準確位置的字串,data 只是傳送到伺服器的物件。如果請求成功,則狀態為 success。這個過程有一個速記程式碼演示。

程式碼片段:

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

輸出:

jquery_for_json_url

通過 Fetch API 方法從 URL 獲取 JSON

在這種情況下,fetch 方法只需使用 URL 來分配資料伺服器並確保返回 JSON 資料。

程式碼片段:

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

輸出:

fetch_api_for_json_url

對來自 URL 的 JSON 使用 XMLHttpRequest

在這裡,我們將首先在具有 XMLHttpRequest 例項的函式中獲取 URL。我們將使用 open 方法準備初始化請求,稍後使用 responseType 將定義響應型別。最後,onload 方法將響應請求並預覽輸出。

程式碼片段:

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

輸出:

xmlhttp 請求

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript JSON