Question

我一直在尝试创建一个将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/

谢谢。

Answer 1

执行AJAX请求（XMLHTTPRequest）时，它将加载整个文件。无法让浏览器加载部分文件。

如果您不打算使用数据库（一次可以查询一定数量的项目），建议您将数据分成几个JSON文件。当执行XMLHTTPRequest时，将仅检索数据的子集。对于下一个请求，您将检索下一个文件，从而获得下一组数据。

Answer 2

我想这就是您要搜索的Lazy.js。它将异步地解析尽可能多的JSON。

导入库：

<script type="text/javascript" src="lazy.js"></script>

<!-- optional: if you want support for DOM event and AJAX-based sequences: -->
<script type="text/javascript" src="lazy.browser.js"></script>

如果您想一次检索10个项目：

var response = JSON.parse(this.responseText);
var result = Lazy(response)
  .take(10);
document.getElementById('placeholder').innerHTML += output;

在onClick上加载更多json数据

2 个答案: