主页 / 问题 / 1518243
Accepted
Ivan Chuzhmakov
Asked:2023-05-08 00:59:41 +0000 UTC2023-05-08 00:59:41 +0000 UTC

如何在不重新获取的情况下使用从获取中接收到的数据？

  • 772

我编写了以下代码，它接收数据并在单击时从数组中剪切 10 个元素：

let url = 'https://dummyjson.com/products?limit=100';//откуда берём JSON данные
let rows_on_page=10;//количество строк на страницу
window.onload = function() {
    pag();    
};
async function pag(number_current_page=1)
{            
    fetch(url,{
        method:'GET',
        headers: {
            'Content-Type': 'text/html;charset=utf-8'
        },
        })
    .then((response) => response.json())
    .then((data) => {
        let offset=number_current_page*rows_on_page; 
        let current_list=offset-rows_on_page;
        all_count_rows=Object.values(data)[0].length;//общее количество строк запроса
    for (var key in data.products.slice(current_list,offset)) {
        index=Number(key)+current_list;
        i=index+1;                         
        console.log(data.products[index]['title']);        
    }
    })
}
<!DOCTYPE html>

<html>
    <head>
        <title>pag</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <nav class="pagination justify-content-center">
            <ul class="pagination">
                <li class="page-item  disabled" onclick="pag(1)">
                    <a class="page-link" href="#"> |&lt; </a>
                </li>
                <li class="page-item  disabled" onclick="pag(1)">
                    <a class="page-link" href="#">Назад</a>
                </li>
                <li class="page-item active " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">4</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">5</a>
                </li>
                <li class="page-item  " onclick="pag(2)">
                    <a class="page-link" href="#">Далее</a>
                </li>
                <li class="page-item  " onclick="pag(10)">
                    <a class="page-link" href="#"> &gt;| </a>
                </li>
            </ul>
        </nav>
        <script src="ft.js"></script>    
    </body>
</html>

但是每次点击，都会访问 url 并读取数据。如何获取数据 1 次并使用它不断切割 10 个元素进行输出？

javascript

1 个回答

  1. Best Answer

    如何在 api 中实现一次数据请求，然后对接收到的数据进行操作的示例

    let url = 'https://dummyjson.com/products?limit=100'; //откуда берём JSON данные
let rows_on_page = 10; //количество строк на страницу
let productList = [];
window.onload = function() {
  getProducts();
};
async function getProducts(number_current_page = 1) {
  fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'text/html;charset=utf-8'
      },
    })
    .then((response) => response.json())
    .then((data) => {
      console.log('Получен ответ');
      productList = data.products;
      pag(1);
    })
}

function pag(page) {
  const container = document.getElementById('productList');
  container.innerText = '';
  for (let i = (page - 1) * 10; i < rows_on_page * page; i++) {
    const product = document.createElement('div');
    product.innerText = productList[i].title;
    container.append(product);
  }
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="pagination justify-content-center">
  <ul class="pagination">
    <li class="page-item  disabled" onclick="pag(1)">
      <a class="page-link" href="#"> |&lt; </a>
    </li>
    <li class="page-item  disabled" onclick="pag(1)">
      <a class="page-link" href="#">Назад</a>
    </li>
    <li class="page-item active " onclick="pag(this.textContent)">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item  " onclick="pag(2)">
      <a class="page-link" href="#">Далее</a>
    </li>
    <li class="page-item  " onclick="pag(10)">
      <a class="page-link" href="#"> &gt;| </a>
    </li>
  </ul>
</nav>
<div id="productList">
  Ожидаем данные от сервера
</div>

    Z.Y. 该代码不考虑单击“返回”、“下一步”按钮，也没有检查返回元素的数量是否超过数组中的元素数量。

    提供数据输出只是为了清晰和理解。

    • 2

相关问题