html中通过JS获取JSON数据并加载的方法

2023年5月27日上午8:03 • JavaScript

获取JSON数据可以使用XMLHttpRequest对象或fetch API，以及jQuery库中的ajax方法。下面分别给出几个示例说明。

1. 使用XMLHttpRequest对象获取JSON数据并渲染

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用XMLHttpRequest对象获取JSON数据并渲染</title>
</head>
<body>
  <h2>使用XMLHttpRequest对象获取JSON数据并渲染</h2>
  <ul id="list"></ul>

  <script>
    // 创建一个XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 设置请求方式和请求地址
    xhr.open('GET', 'data.json', true);
    // 响应事件处理函数
    xhr.onreadystatechange = function() {
      // 判断响应是否完成
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 将响应数据解析为JSON对象
        var data = JSON.parse(xhr.responseText);
        // 渲染数据到页面上
        var listEl = document.querySelector('#list');
        for (var i = 0; i < data.length; i++) {
          var itemEl = document.createElement('li');
          itemEl.innerText = data[i].name + ' - ' + data[i].age;
          listEl.appendChild(itemEl);
        }
      }
    }
    // 发送请求
    xhr.send();
  </script>
</body>
</html>

2. 使用fetch API获取JSON数据并渲染

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用fetch API获取JSON数据并渲染</title>
</head>
<body>
  <h2>使用fetch API获取JSON数据并渲染</h2>
  <ul id="list"></ul>

  <script>
    fetch('data.json')
      .then(response => response.json()) // 将响应数据解析为JSON对象
      .then(data => {
        // 渲染数据到页面上
        var listEl = document.querySelector('#list');
        for (var i = 0; i < data.length; i++) {
          var itemEl = document.createElement('li');
          itemEl.innerText = data[i].name + ' - ' + data[i].age;
          listEl.appendChild(itemEl);
        }
      })
      .catch(error => console.error(error)); // 处理请求失败情况
  </script>
</body>
</html>

在以上两种方法中，我们都先创建了一个用于请求数据的XMLHttpRequest对象或使用fetch API发送请求，然后通过设置onreadystatechange事件或使用Promise来处理数据的响应。最后，我们将获取到的JSON数据解析成对象，并使用DOM操作将数据渲染到页面上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html中通过JS获取JSON数据并加载的方法 - Python技术站