javascript - 将 JSON XMLHttpRequest 的分页部分呈现为 HTML

Question

我想将 XHR 附带的 JSON 数据的分页部分呈现为 HTML。

因此，用于选择要跳转的所需页面数的下一页和上一页按钮和输入应该可以在不重新加载的情况下工作。

我怎样才能实现它？

我尝试编写一个 getData 函数，以便通过在分页中单击下一个/上一个按钮来发送页码信息。然后我没有弄清楚如何结束这个逻辑。

JSON（我删除了一些重复的部分以使其简短）：

{
"results": [
{
"title": "aaa",
"tags": [
"destinations",
"rankings"
],
"main_img": "Screen_Shot_2020-07-26_at_5.55.26_PM.png",
"content": "<p>aaa</p>",
"read_time": 3,
"last_updated": "2020-07-30",
"slug": "aaa"
},
{
"title": "United States",
"tags": [
"destinations"
],
"main_img": "dmitry.jpg",
"content": "<p>aa</p>",
"read_time": 9,
"last_updated": "2020-07-30",
"slug": "united-states"
},
{
"title": "calculation methods",
"tags": [
"Others"
],
"main_img": "example2_njW98do.jpg",
"content": "<p>Yes.</p>",
"read_time": null,
"last_updated": "2020-07-16",
"slug": "calculation-methods"
},
],
"total_records": 8,
"total_pages": 2,
"page": 1,
"has_next": true,
"has_prev": false
}

我当前的代码（我怀疑代码的逻辑，所以我在这里停下来寻求帮助）：

  <script>

     const xhr = new XMLHttpRequest();
     function getData(page_number) {
     
     xhr.open('GET','http://127.0.0.1:8000/articles/search/' + '?page=' + page_number);
     xhr.responseType = 'json';
     }
     getData(1);
     xhr.onload = () => {
        const data = xhr.response;
        if (data.has_next == true) {
           const next_page = data.page + 1
           html_next_page = `<div class="hover-shadow btn btn-primary rounded-circle mx-1 text-center" style="padding:inherit; width: 45px; height: 45px; font-size: 30px; line-height: 40px;" id="btn-next-page">&#8250;</div>`
        }
        if (data.has_prev == true) {
           let prev_page = data.page - 1
           html_prev_page = `<div class="hover-shadow btn btn-primary rounded-circle mx-1 text-center" style="padding:inherit; width: 45px; height: 45px; font-size: 30px; line-height: 40px;">&#8249;</div>`
        }
        const cards = data.results.map(article => {
           return `
              <div class="col-12">
                 <div class="card hover-md-shadow position-relative mb-4 border-0">
                    <div class="row no-gutters px-md-3 py-3 py-lg-4">
                       <div class="col-md-4">
                          <div class="my-4-3-img-wrapper h-100 d-flex flex-column align-items-center" style="padding-bottom: 56.2%;">
                             <img src="/media/${article.main_img}" class="rounded-lg" alt="...">
                          </div>
                       </div>
                       <div class="col-md-8 pl-lg-2 position-static">
                          <div class="card-body px-1 px-md-4 h-100 d-flex flex-column justify-content-around">
                             <a class="stretched-link" href="${article.slug}">
                                <h2 class="card-title text-truncate">${article.title}</h2>
                             </a>
                             <p class="card-text text-muted my-2line-ellipsis">
                                ${article.content}
                             </p>
                             <p class="card-text"><small class="text-muted">${article.read_time}</small></p>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           `;
            }).join("")
        document.getElementById('js-card').innerHTML = cards + html_next_page
        document.getElementById("btn-next-page").addEventListener("click", function(){
           const a = getData(2);
           xhr.onload = () => {
              const data = xhr.response;
           };
           document.getElementById("demo").innerHTML = a;
        });
     };
     xhr.send();

  </script>

标签： javascriptajaxxmlhttprequest