script.js - master - i.demidoff/web-php-js

script.js
76 строк3 KB
Your Name
Первый коммит: форма обратной связи на JS+PHP
01 июл 2026, 16:23
01 июл 2026, 16:23b7b8513
const form = document.getElementById('feedbackForm');
const resultDiv = document.getElementById('result');
const messagesContainer = document.getElementById('messages-container');

// 1. Функция загрузки и отображения сообщений
async function loadMessages() {
    try {
        const response = await fetch('save.php?action=list');
        const data = await response.json();
        
        messagesContainer.innerHTML = ''; // Очищаем контейнер

        if (data.length === 0) {
            messagesContainer.innerHTML = '<p style="color: #666; text-align: center;">Пока нет сообщений</p>';
            return;
        }

        // Рисуем каждое сообщение
        data.forEach(msg => {
            const card = document.createElement('div');
            card.className = 'message-card';
            card.innerHTML = `
                <div class="msg-header">
                    <strong>${escapeHtml(msg.name)}</strong>
                    <span class="msg-date">${msg.time}</span>
                </div>
                <p class="msg-text">${escapeHtml(msg.message)}</p>
            `;
            messagesContainer.appendChild(card);
        });
    } catch (err) {
        console.error(err);
    }
}

// Простая защита от XSS (чтобы нельзя было вставить вредоносный HTML в сообщение)
function escapeHtml(text) {
    return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

// 2. Обработка отправки формы
form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = document.getElementById('name').value.trim();
    const message = document.getElementById('message').value.trim();

    resultDiv.textContent = 'Отправляем...';

    try {
        const response = await fetch('save.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `name=${encodeURIComponent(name)}&message=${encodeURIComponent(message)}`
        });

        const data = await response.json();
        resultDiv.textContent = data.message;

        // После успешной отправки сразу обновляем список
        if (data.success) {
            loadMessages(); 
            form.reset();
        }
    } catch (err) {
        resultDiv.textContent = 'Ошибка соединения';
    }
});

// Запускаем загрузку сообщений сразу при старте
loadMessages();