Flask для школьниковГлава 7 из 10
SilverTests.ru · Курс веб-разработкиJavaScript и fetch
JavaScript и fetch
Браузер сам общается с сервером — без перезагрузки страницы
Теперь наш сервер умеет возвращать JSON (jsonify) и принимать JSON (request.json).
Цель
Отправлять запросы из JavaScript через fetch. Обновлять страницу без перезагрузки. Настроить автообновление через setInterval. Понять полный цикл: JS → fetch → Flask → JSON → JS обновляет DOM.
📝 Техзадание
Страница /live: список привычек загружается из /api/habits через JavaScript. Новая привычка добавляется кнопкой без перезагрузки. Список обновляется каждые 2 секунды — если другой ученик добавит привычку, ты увидишь её автоматически.
1Зачем JavaScript, если есть Flask?
Flask работает на сервере. Когда страница отправлена — сервер забыл про неё. Чтобы обновить что-то в браузере без перезагрузки — нужен JavaScript. Он работает прямо в браузере.
| |
Flask (сервер) |
JavaScript (браузер) |
| Где |
Компьютер учителя |
Браузер ученика |
| Язык |
Python |
JavaScript |
| Может |
Файлы, БД, логика |
Менять HTML, анимации |
| Когда |
При каждом запросе |
Постоянно, пока страница открыта |
2fetch — запрос из JavaScript
GET (получить данные)
fetch('/api/habits')
.then(response => response.json()) // парсим JSON
.then(data => {
console.log(data.count); // 2
});
POST (отправить данные)
fetch('/api/add', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name: 'Йога'})
})
.then(r => r.json())
.then(data => console.log(data));
.then() — «когда ответ придёт, сделай...». Это Promise (обещание): запрос уходит, а .then выполнится, когда сервер ответит.
Ключевое отличие от формы: HTML-форма перезагружает страницу. fetch — нет. Данные уходят и приходят «за кулисами».
3setInterval — автообновление
function loadHabits() {
fetch('/api/habits')
.then(r => r.json())
.then(data => {
// обновляем HTML из полученных данных
var html = '';
for (var h of data.habits)
html += '<p>' + (h.done ? '✅' : '⬜') + ' ' + h.name + '</p>';
document.getElementById('list').innerHTML = html;
});
}
loadHabits(); // первый раз — сразу
setInterval(loadHabits, 2000); // потом — каждые 2 сек
JS: render
обновляет HTML
Это называется polling — браузер регулярно спрашивает сервер «что нового?». Именно так работает Regex Territory: все браузеры опрашивают /api/state каждые 1.5 секунды.
Теперь ты знаешь все технологии, из которых состоит игра. В последней главе мы соберём всё вместе.