Современные способы совместного использования PHP, MySQL и JavaScript

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

Пример 1: Регистрация пользователя с проверкой уникальности email

PHP скрипт register.php

<?php
header('Content-Type: application/json');
$data = json_decode(file_get_contents('php://input'), true);
$name = $data['name'] ?? '';
$email = $data['email'] ?? '';
$password = password_hash($data['password'] ?? '', PASSWORD_DEFAULT);
try {
    $pdo = new PDO('mysql:host=localhost;dbname=testdb', 'user', 'pass');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // проверка дубликата email
    $stmt = $pdo->prepare('SELECT id FROM users WHERE email = ?');
    $stmt->execute([$email]);
    if ($stmt->fetch()) {
        echo json_encode(['success' => false, 'message' => 'Email уже зарегистрирован']);
        exit;
    }
    // вставка нового пользователя
    $stmt = $pdo->prepare('INSERT INTO users (name, email, password) VALUES (?, ?, ?)');
    $stmt->execute([$name, $email, $password]);
    echo json_encode(['success' => true, 'message' => 'Регистрация успешна']);
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
}
?>

JavaScript код (fetch с POST)

fetch('register.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name:'Иван', email:'ivan@example.com', password:'secret'})
})
.then(res => res.json())
.then(data => {
    if (data.success) {
        console.log(data.message); // 'Регистрация успешна'
    } else {
        console.error(data.message); // 'Email уже зарегистрирован'
    }
});

Результат (пример ответа сервера):

{"success":true,"message":"Регистрация успешна"}

Пример 2: Авторизация с использованием сессий

PHP login.php

<?php
session_start();
header('Content-Type: application/json');
$data = json_decode(file_get_contents('php://input'), true);
$email = $data['email'] ?? '';
$password = $data['password'] ?? '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=testdb', 'user', 'pass');
    $stmt = $pdo->prepare('SELECT id, password FROM users WHERE email = ?');
    $stmt->execute([$email]);
    $user = $stmt->fetch();
    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['id'];
        echo json_encode(['success' => true, 'message' => 'Вход выполнен']);
    } else {
        echo json_encode(['success' => false, 'message' => 'Неверные учетные данные']);
    }
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
}
?>

JavaScript код

fetch('login.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({email:'ivan@example.com', password:'secret'})
})
.then(res => res.json())
.then(data => {
    if (data.success) {
        window.location.href = 'dashboard.php';
    } else {
        alert(data.message);
    }
});

Результат при успехе:

{"success":true,"message":"Вход выполнен"}

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

PHP upload.php

<?php
header('Content-Type: application/json');
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $uploadDir = 'uploads/';
    $filename = uniqid() . '_' . basename($_FILES['file']['name']);
    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadDir . $filename)) {
        echo json_encode(['success' => true, 'file' => $filename]);
    } else {
        echo json_encode(['success' => false, 'message' => 'Не удалось сохранить файл']);
    }
} else {
    echo json_encode(['success' => false, 'message' => 'Ошибка загрузки']);
}
?>

JavaScript с XMLHttpRequest и отслеживанием прогресса

const formData = new FormData();
formData.append('file', fileInput.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        console.log('Прогресс: ' + percent + '%');
    }
};
xhr.onload = function() {
    const data = JSON.parse(xhr.responseText);
    if (data.success) {
        console.log('Файл загружен:', data.file);
    } else {
        console.error(data.message);
    }
};
xhr.send(formData);

Результат при успехе:

{"success":true,"file":"5f8a3b2c1d0e4_photo.jpg"}

Пример 4: Автодополнение поиска (поиск по названию товара)

PHP search.php

<?php
header('Content-Type: application/json');
$q = $_GET['q'] ?? '';
if (strlen($q) < 2) {
    echo json_encode([]);
    exit;
}
try {
    $pdo = new PDO('mysql:host=localhost;dbname=testdb', 'user', 'pass');
    $stmt = $pdo->prepare('SELECT name FROM products WHERE name LIKE ? LIMIT 10');
    $stmt->execute(['%' . $q . '%']);
    $products = $stmt->fetchAll(PDO::FETCH_COLUMN);
    echo json_encode($products);
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode([]);
}
?>

JavaScript debounce и fetch

let timeout;
document.getElementById('searchInput').addEventListener('input', function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        const q = this.value;
        if (q.length < 2) { document.getElementById('suggestions').innerHTML = ''; return; }
        fetch('search.php?q=' + encodeURIComponent(q))
            .then(res => res.json())
            .then(data => {
                let html = data.map(name => '<div>' + name + '</div>').join('');
                document.getElementById('suggestions').innerHTML = html;
            });
    }, 300);
});

Результат (пример ответа при запросе q=iph)

["iPhone 14","iPhone 13","iPhone SE"]