时间戳

首页 > 解决方案 > 点击加载更多json数据

javascript - 点击加载更多json数据

问题描述

我一直在尝试创建一个将 JSON 数据附加到ul. 问题是 JSON 文件有超过 600 个值。

我想限制检索到的值的数量，比如 10，然后添加一个“加载更多”按钮来追加更多，例如。10个以上，以此类推。这是我的代码。

<body onload="loadUser(20)">
  <ul id="placeholder"></ul>

function loadUser(arg) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'people.json', true);
  xhr.onload = function() {
    if (this.status == 200) {
      var users = JSON.parse(this.responseText);
      for (var i = 0; i < arg; i++) {
        var output = `<li class="list_item">${users[i].name</li>`;
        document.getElementById('placeholder').innerHTML += output;
      }
      document.getElementById('placeholder').innerHTML += '<button onclick="loadmore()">load more</button>';
    }
  }
  xhr.send();
}

// JSON Example:
[{
    "id": 1,
    "name": "Mithu Mondal",
    "email": "mithu@bla.com"
  },

  {
    "id": 2,
    "name": "Frankenstien",
    "email": "frank@gmail.com"
  }
]

这是链接：https ://www.mithuation.ml/jsonExample/

提前致谢。

标签： javascriptjson

解决方案

当您执行AJAX请求 ( XMLHTTPRequest) 时，它会加载整个文件。没有办法让浏览器加载部分文件。

如果您不打算使用数据库（这将允许您一次查询一定数量的项目），我建议您将数据拆分为多个JSON文件。当您执行 时XMLHTTPRequest，您将只检索数据的一个子集。对于下一个请求，您将检索下一个文件，从而获得下一组数据。

推荐阅读