0

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

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

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

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

5
  • 1
    гуглите ajax, fetch, axios
    – ArchDemon
    8 янв в 18:07
  • 1
    Данные можно хранить в оперативной памяти... Передавать их можно в формате JSON...
    – ksa
    8 янв в 19:54
  • @ksa я нагуглил что в php не поддерживается json но есть XML, это работает также как json или все же есть отличия? 10 янв в 11:29
  • 1
    @ReijiAkkerman, php может "сделать" любой текст. В том числе и JSON формата... Работа c XML и JSON различается как минимум синтаксически...
    – ksa
    10 янв в 11:50
  • 1
    Сам я с php не работаю... Везде JavaScript.
    – ksa
    10 янв в 11:52

1 ответ 1

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>

2
  • а можно ли как-то сохранять сразу большой блок данных на компьютере пользователя? Пишу органайзер haruproject.space/scheduler и мне нужно чтобы данные на каждый день за указанный в календаре период локально сохранялись на компьютере пользователя, а при нажатии на день в этом календаре соответсвующие данные подгружались не асинхронным запросом а с файла какого нибудь или кэша. Подскажите если есть такая технология, если да то как ее реализовать? Хотя бы абстрактно 10 янв в 16:54
  • @ReijiAkkerman, что-то мне подсказывает что ты копаешь не "туда". Прислать можно довольно большие данные... Хранить данные локально на компе так же можно... Например в LocalStorage... learn.javascript.ru/localstorage
    – ksa
    10 янв в 17:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.