Связываем фронтенд и бэкенд: практическое руководство по PHP, MySQL, JavaScript, HTML5

Раздел: Веб-разработка -> Интеграция фронтенда и бэкенда

Основные сценарии взаимодействия клиента и сервера

В современной веб-разработке связка PHP, MySQL, JavaScript и HTML5 обеспечивает полный цикл обработки данных: от интерфейса до хранения. Рассмотрим ключевые подходы к интеграции.

Асинхронная отправка формы через Fetch API с сохранением в MySQL

Как передать данные из формы на сервер без перезагрузки страницы и записать их в базу данных?

Предположим, есть форма обратной связи (HTML5). JavaScript перехватывает событие submit, формирует JSON и отправляет на PHP-скрипт. PHP принимает данные, использует подготовленные выражения (PDO) для вставки в MySQL и возвращает JSON-ответ.


<form id="feedbackForm">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Отправить</button>
</form>

<script>
document.getElementById('feedbackForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);
  const response = await fetch('save.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data)
  });
  const result = await response.json();
  alert(result.message);
});
</script>

Web php mysql (веб php mysql)


<?php
// save.php
header('Content-Type: application/json');
$input = json_decode(file_get_contents('php://input'), true);

$dsn = 'mysql:host=localhost;dbname=test;charset=utf8';
$pdo = new PDO($dsn, 'user', 'pass', [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);

$stmt = $pdo->prepare('INSERT INTO feedback (name, email, message) VALUES (:name, :email, :message)');
$stmt->execute([
    ':name' => $input['name'],
    ':email' => $input['email'],
    ':message' => $input['message']
]);

echo json_encode(['success' => true, 'message' => 'Данные сохранены']);

Css javascript php mysql (css javascript php mysql)

Типичные ошибки:

  • Ошибка CORS – если фронтенд и бэкенд на разных доменах, PHP должен отправлять заголовок Access-Control-Allow-Origin.
  • Некорректный Content-Type – сервер ожидает JSON, а клиент отправляет form-data. Проверить заголовки в fetch.
  • SQL-инъекция – избегать конкатенации строк, всегда использовать подготовленные запросы (PDO или MySQLi).
  • Неверный формат даты/времени – если в таблице есть поле timestamp, передавать его как строку в формате YYYY-MM-DD HH:MM:SS.

Вариант 1: Традиционный POST с обновлением страницы

Как реализовать сохранение данных с полной перезагрузкой страницы, используя PHP и HTML форму?

Этот подход проще в реализации и подходит для случаев, где асинхронность не требуется. Данные отправляются через стандартный атрибут action формы. PHP обрабатывает запрос, сохраняет в MySQL и перенаправляет пользователя.


<form action="save.php" method="POST">
  <input type="text" name="name">
  <input type="submit" value="Отправить">
</form>

Html php mysql (html php mysql)


<?php
// save.php
$name = $_POST['name'] ?? '';
// подключение к БД и вставка...
header('Location: success.php');

Html css php mysql (html css php mysql)

Проблема: потеря пользовательского ввода при ошибке валидации. Решение – сохранять данные в сессии или использовать AJAX.

Вариант 2: jQuery.ajax с сервером на PHP

Как использовать библиотеку jQuery для отправки данных и получения ответа без перезагрузки?

Хотя Fetch API и нативный XMLHttpRequest вытесняют jQuery, на многих старых проектах он все еще встречается.


$.ajax({
  url: 'save.php',
  method: 'POST',
  data: { name: $('#name').val(), email: $('#email').val() },
  dataType: 'json',
  success: function(response) {
    alert(response.message);
  },
  error: function(xhr) {
    console.error(xhr.responseText);
  }
});

Html css javascript php mysql (html css javascript php mysql)

Ошибка: если PHP возвращает не JSON (например, ошибку синтаксиса), jQuery может выдать parseerror. Рекомендуется всегда устанавливать Content-Type: application/json в PHP.

Вариант 3: Отправка FormData с файлами через Fetch

Как загрузить файл на сервер и сохранить информацию о нем в MySQL?

Для файлов не подходит JSON, используется FormData. PHP обрабатывает $_FILES.


const form = document.getElementById('uploadForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const response = await fetch('upload.php', { method: 'POST', body: formData });
  const result = await response.text();
  console.log(result);
});

Php mysql javascripts (php mysql и javascript)


<?php
// upload.php
$uploadDir = 'uploads/';
$fileName = basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'], $uploadDir . $fileName);
// запись имени в БД...

Проблема: превышение лимита upload_max_filesize в php.ini. Решение – увеличить значение или обрабатывать ошибку UPLOAD_ERR_INI_SIZE.

Расширенные примеры с пошаговыми пояснениями

Пример 1: Динамическая загрузка записей из MySQL через AJAX

Создадим страницу, которая отображает список пользователей из базы данных. При нажатии на кнопку «Загрузить» JavaScript получает данные через Fetch и вставляет их в DOM.

Пример 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Загрузка данных</title>
</head>
<body>
  <div id="usersList"></div>
  <button id="loadBtn">Загрузить пользователей</button>

  <script>
  document.getElementById('loadBtn').addEventListener('click', async () => {
    const response = await fetch('get_users.php');
    const users = await response.json();
    const list = document.getElementById('usersList');
    list.innerHTML = users.map(u => `<p>${u.name} (${u.email})</p>`).join('');
  });
  </script>
</body>
</html>
Пример 

<?php
// get_users.php
header('Content-Type: application/json');
$pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'user', 'pass');
$stmt = $pdo->query('SELECT name, email FROM users');
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
  
Результат (в консоли браузера или на странице):
[{"name":"Иван","email":"ivan@example.com"},{"name":"Петр","email":"petr@example.com"}]

Пояснение: PHP возвращает массив в формате JSON, JavaScript преобразует его и строит HTML. Важно, чтобы в PHP не было лишнего вывода (например, ошибок) - иначе JSON будет поврежден.

Пример 2: Проверка уникальности email через AJAX (валидация на лету)

Пользователь вводит email, и JavaScript отправляет запрос на сервер, чтобы проверить, не занят ли он. Результат показывается под полем ввода.

Пример 

<input type="email" id="email" name="email">
<span id="emailStatus"></span>

<script>
document.getElementById('email').addEventListener('blur', async (e) => {
  const email = e.target.value;
  const response = await fetch('check_email.php?email=' + encodeURIComponent(email));
  const data = await response.json();
  const status = document.getElementById('emailStatus');
  if (data.available) {
    status.textContent = 'Доступен';
    status.style.color = 'green';
  } else {
    status.textContent = 'Уже используется';
    status.style.color = 'red';
  }
});
</script>
Пример 

<?php
// check_email.php
header('Content-Type: application/json');
$email = $_GET['email'] ?? '';
$pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'user', 'pass');
$stmt = $pdo->prepare('SELECT COUNT(*) FROM users WHERE email = :email');
$stmt->execute([':email' => $email]);
$count = $stmt->fetchColumn();
echo json_encode(['available' => $count == 0]);
  
Результат (если email 'test@test.com' уже есть):
{"available":false}

Ошибка: если email содержит спецсимволы, нужно использовать encodeURIComponent в JavaScript, иначе PHP может неверно распарсить строку.

Пример 3: Обновление данных в реальном времени с помощью Server-Sent Events (SSE)

Используем EventSource для прослушивания событий от PHP скрипта, который читает новые записи из MySQL каждые несколько секунд.

Пример 

// frontend.html
<script>
const evtSource = new EventSource('stream.php');
evtSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  document.getElementById('messages').innerHTML += `<p>${data.text}</p>`;
};
</script>
Пример 

<?php
// stream.php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'user', 'pass');
$lastId = 0;
while (true) {
  $stmt = $pdo->prepare('SELECT id, text FROM messages WHERE id > :lastId');
  $stmt->execute([':lastId' => $lastId]);
  $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
  foreach ($rows as $row) {
    echo "data: " . json_encode($row) . "\n\n";
    ob_flush();
    flush();
    $lastId = $row['id'];
  }
  sleep(2);
}

Пояснение: SSE проще WebSocket, но работает только в одну сторону - от сервера к клиенту. Для двустороннего обмена нужны WebSocket (через Ratchet или другие библиотеки).

Пример 4: RESTful API на PHP с поддержкой CRUD и авторизацией через токен

Создадим API для управления задачами (tasks). Клиент (JavaScript) отправляет GET, POST, PUT, DELETE запросы с Bearer токеном. PHP проверяет токен и выполняет операции с MySQL.

Пример 

// api.php – простой роутер
header('Content-Type: application/json');
$token = $_SERVER['HTTP_AUTHORIZATION'] ?? '';
if (!validateToken($token)) {
  http_response_code(401);
  echo json_encode(['error' => 'Unauthorized']);
  exit;
}

$method = $_SERVER['REQUEST_METHOD'];
$input = json_decode(file_get_contents('php://input'), true);

switch ($method) {
  case 'GET':
    // получить все задачи
    break;
  case 'POST':
    // создать задачу
    break;
  // ...
}
Пример 

// Пример JavaScript запроса с токеном
fetch('api.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  body: JSON.stringify({title: 'Новая задача'})
});
  
Ответ (при успехе):
{"id":42, "title":"Новая задача", "completed":false}

Проблемы: необходима защита от CSRF (если токен не используется правильно), а также валидация входных данных. В реальном проекте лучше использовать готовые фреймворки (Laravel, Symfony).

PHP MySQL JavaScript HTML5 - comments

En
Php mysql javascript html5 (php)