主页 / 问题 / 1484672
Accepted
Reiji Akkerman
Asked:2023-01-09 01:31:06 +0000 UTC2023-01-09 01:31:06 +0000 UTC

如何将数据上传到站点使其不显示在页面上？

  • 772

在此处输入图像描述我正在学习写网站，现在我在做计划页面。

问题如下 - 在所附照片上，如您所见，有 2 个主要块（日历和一个块，其中更详细地说明了当天的任务）。我想最初从数据库传输数据以及加载 html 页面，只是将那些应该只在特定时刻出现的元素标记为display: none;- 因为它们不应该被看到。所有项目都保存到日​​历中。而在左侧照片中的当天区块中，它们是使用 JS 简单复制的。

以这种方式处理数据对我来说似乎是一种非常错误的方式。告诉我如何以及在哪里可以存储从数据库接收到的数据，这样就可以在不使用 JS 重新加载页面的情况下对其进行操作。一般来说，我怎样才能在不重新加载的情况下从数据库中传输数据？？？

后端是用 PHP 编写的。原生 HTML、CSS、JS 前端

javascript

1 个回答

  1. Best Answer

    告诉我如何以及在哪里可以存储从数据库接收到的数据，这样就可以在不使用 JS 重新加载页面的情况下对其进行操作。无论如何，我怎样才能在不重新加载的情况下从数据库中传输数据呢？

    下面是一些关于如何处理数据的示例... PHPists 已经可以告诉您有关服务器端 API 的形成。

    let data = {}
document.querySelector('#read').addEventListener('click', e => {
  const o = e.target
  o.disabled = true
  const url = 'https://reqres.in/api/users?page=1'
  fetch(url)
    .then(res => res.json())
    .then(res => {
      data = res
      o.disabled = false
    })
    .catch(console.log)
})
document.querySelector('#show').addEventListener('click', e => {
  const arr = data?.data ?? []
  const ob = document.querySelector('#box')
  ob.innerHTML = ''
  arr.forEach(o => {
    const html = `
      <div>
        <img src='${o.avatar}' />
        <p>Имя: ${o.first_name} ${o.last_name}</p>
      </div>
    `
    ob.insertAdjacentHTML('beforeend', html)
  })
})
document.querySelector('#clear').addEventListener('click', e => {
  document.querySelector('#box').innerHTML = ''
})
    #box {
  display: flex;
  flex-wrap: wrap;
  
}
#box div {
  margin: 10px;
  padding: 5px;
  border: 1px solid;
  border-radius: 5px;
}
    <button id='read'>Прочитать данные</button>
<button id='show'>Показать</button>
<button id='clear'>Скрыть</button>
<div id='box'></div>

    • 2

相关问题