как загружать данные на сайт так чтобы они не отображались на странице?

Рейтинг: 0Ответов: 1Опубликовано: 08.01.2023

введите сюда описание изображенияУчусь писать сайты, сейчас работаю над страницей планировщика.

Проблема следующего характера - на прикрепленном фото, как вы можете видеть, есть 2 основных блока (календарь и блок где более подробно расписаны задачи на день). Я хотел изначально передавать данные из БД вместе с загрузкой html-страницы просто помечая те элементы которые должны появиться только в определенный момент как display: none; - так как их видеть не должны. Все элементы сохраняются в календарь. А в блок дня который на фото слева они просто копируются при помощи JS.

Манипуляция данными таким образом мне кажется очень неправильным способом. Подскажите как и где я могу хранить данные получаемые из БД чтобы ими потом можно было манипулировать без перезагрузки страницы с помощью JS. Да и вообще как я могу в принципе передавать данные из БД не перезагружая ее???

Backend пишу на PHP. Frontend на нативных HTML, CSS, JS

javascript html php http
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Подскажите как и где я могу хранить данные получаемые из БД чтобы ими потом можно было манипулировать без перезагрузки страницы с помощью JS. Да и вообще как я могу в принципе передавать данные из БД не перезагружая ее?

Вот некая иллюстрация как можно работать с данными... Про формирование серверного АПИ уже могут рассказать PHPисты.

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>