在 JavaScript 中从 URL 获取 JSON

Anika Tabassum Era 2023年10月12日
  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 Facebook

相关文章 - JavaScript JSON