在 JavaScript 中从 URL 获取 JSON

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中从 URL 获取 JSON

作者：迹忆客最近更新：2024/03/21 浏览次数：

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>

输出：

通过 `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));

输出：

对来自 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);
});

输出：

上一篇：在 JavaScript 中使用 Fetch API 发布一个 JSON 对象

下一篇：使用 JavaScript 创建键盘快捷键

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享