Объединение фронтенда и бэкенда: HTML, JS, PHP

Расширенные примеры интеграции HTML, JavaScript и PHP

Пример 1: Загрузка файла через AJAX с отображением прогресса.

// HTML
<input type='file' id='fileInput'>
<button id='uploadBtn'>Загрузить</button>
<progress id='progressBar' value='0' max='100'></progress>
<div id='uploadResult'></div>
<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
    var file = document.getElementById('fileInput').files[0];
    var formData = new FormData();
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percent = (e.loaded / e.total) * 100;
            document.getElementById('progressBar').value = percent;
        }
    });
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('uploadResult').textContent = xhr.responseText;
        }
    };
    xhr.send(formData);
});
</script>

// upload.php
<?php
$targetDir = 'uploads/';
$file = $_FILES['file'];
if ($file['error'] === UPLOAD_ERR_OK) {
    $filename = basename($file['name']);
    if (move_uploaded_file($file['tmp_name'], $targetDir . $filename)) {
        echo 'Файл загружен: ' . $filename;
    } else {
        echo 'Ошибка перемещения файла.';
    }
} else {
    echo 'Ошибка загрузки.';
}
?>

Результат: progress bar заполняется, после завершения выводится имя загруженного файла.

Пример 2: Работа с сессиями и авторизацией через fetch.

// login.html
<form id='loginForm'>
    <input type='text' name='username' placeholder='Логин'>
    <input type='password' name='password' placeholder='Пароль'>
    <button type='submit'>Войти</button>
</form>
<div id='authResult'></div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    fetch('login.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('authResult').innerHTML = 'Успешный вход, ' + data.username;
        } else {
            document.getElementById('authResult').textContent = 'Ошибка: ' + data.error;
        }
    });
});
</script>

// login.php
<?php
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
// Проверка (упрощённая)
if ($username === 'admin' && $password === 'secret') {
    $_SESSION['user'] = $username;
    echo json_encode(['success' => true, 'username' => $username]);
} else {
    echo json_encode(['success' => false, 'error' => 'Неверные данные']);
}
?>

Результат: при правильных данных сессия создаётся, возвращается успех.

Пример 3: Получение списка пользователей из базы данных через JSON API.

// index.html
<button id='loadUsers'>Загрузить пользователей</button>
<ul id='userList'></ul>
<script>
document.getElementById('loadUsers').addEventListener('click', function() {
    fetch('users.php')
    .then(response => response.json())
    .then(users => {
        var list = document.getElementById('userList');
        list.innerHTML = '';
        users.forEach(function(user) {
            var li = document.createElement('li');
            li.textContent = user.name + ' (' + user.email + ')';
            list.appendChild(li);
        });
    });
});
</script>

// users.php
<?php
// Подключение к БД (PDO)
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$stmt = $pdo->query('SELECT name, email FROM users');
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
header('Content-Type: application/json');
echo json_encode($users);
?>

Результат: после нажатия на кнопку выводится список пользователей.

Пример 4: Использование async/await с fetch для последовательных запросов.

async function getUserData(id) {
    try {
        let response = await fetch('user.php?id=' + id);
        let data = await response.json();
        console.log('Пользователь:', data);
        // Дополнительная обработка
    } catch (error) {
        console.error('Ошибка загрузки:', error);
    }
}
getUserData(1);

Этот подход делает асинхронный код более читаемым, похожим на синхронный.

Пример 5: Отправка формы с возвратом части HTML (например, для замены блока).

// JavaScript
fetch('process.php', {
    method: 'POST',
    body: new FormData(document.getElementById('myForm'))
})
.then(response => response.text())
.then(html => {
    document.getElementById('resultContainer').innerHTML = html;
});

// process.php
<?php
// Обработка и вывод HTML напрямую
echo '<div class="success">Форма отправлена!</div>';
?>

Этот способ удобен, когда PHP генерирует готовый HTML-фрагмент.