Как PHP работает с JavaScript: методы и примеры

Расширенные примеры взаимодействия PHP и JavaScript

Полноценный AJAX-запрос с обработкой ошибок и загрузкой файла

Пример отправки формы с файлом через FormData и PHP-скриптом.

// upload.php
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(['error' => 'Метод не разрешён']);
  exit;
}
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);
$file = $_FILES['file'] ?? null;
if ($file && $file['error'] === UPLOAD_ERR_OK) {
  $path = $uploadDir . basename($file['name']);
  if (move_uploaded_file($file['tmp_name'], $path)) {
    echo json_encode(['success' => true, 'path' => $path]);
  } else {
    echo json_encode(['error' => 'Не удалось переместить файл']);
  }
} else {
  echo json_encode(['error' => 'Файл не загружен']);
}

JavaScript:

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  fetch('upload.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) console.log('Файл загружен:', data.path);
    else console.error('Ошибка:', data.error);
  })
  .catch(err => console.error('Сетевая ошибка', err));
});

Результат при успешной загрузке (консоль):

Файл загружен: uploads/example.png

Простой чат на WebSocket с использованием библиотеки Ratchet

Серверная часть:

// Chat.php (класс для Ratchet)
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
  protected $clients;

  public function __construct() {
    $this->clients = new \SplObjectStorage;
  }

  public function onOpen(ConnectionInterface $conn) {
    $this->clients->attach($conn);
    echo "Новое соединение: {$conn->resourceId}\n";
  }

  public function onMessage(ConnectionInterface $from, $msg) {
    foreach ($this->clients as $client) {
      if ($from !== $client) {
        $client->send($msg);
      }
    }
  }

  public function onClose(ConnectionInterface $conn) {
    $this->clients->detach($conn);
    echo "Соединение закрыто: {$conn->resourceId}\n";
  }

  public function onError(ConnectionInterface $conn, \Exception $e) {
    echo "Ошибка: {$e->getMessage()}\n";
    $conn->close();
  }
}

Клиентский скрипт:

const socket = new WebSocket('ws://localhost:8080');
const messageInput = document.getElementById('msg');
const sendBtn = document.getElementById('send');

socket.onopen = () => console.log('WebSocket соединение установлено');

socket.onmessage = (event) => {
  const div = document.createElement('div');
  div.textContent = event.data;
  document.getElementById('messages').appendChild(div);
};

sendBtn.addEventListener('click', () => {
  socket.send(messageInput.value);
  messageInput.value = '';
});

Результат: при отправке сообщения все подключённые клиенты получают его.

Long polling для имитации реального времени

PHP-скрипт:

// longpoll.php
header('Content-Type: application/json');
$lastCheck = $_GET['time'] ?? 0;
$newData = null;
$start = time();
while (time() - $start < 30) {
  // Имитация проверки новых данных
  $data = ['message' => 'Новое уведомление', 'time' => time()];
  $newData = $data;
  if ($newData && $newData['time'] > $lastCheck) {
    echo json_encode($newData);
    exit;
  }
  usleep(500000); // 0.5 sec
}
echo json_encode(['timeout' => true]);

JavaScript:

function poll() {
  fetch('longpoll.php?time=' + Date.now())
  .then(r => r.json())
  .then(data => {
    if (data.timeout) {
      poll(); // снова запрос
    } else {
      console.log('Получено:', data);
      poll();
    }
  });
}
poll();

Результат: периодические уведомления от сервера.

Передача динамического контента через фрагмент HTML (вставка PHP в JS-шаблон)

PHP генерирует часть страницы, JavaScript вставляет её в DOM:

// getContent.php
$id = $_GET['id'] ?? 0;
$content = "
Контент для ID {$id}
";
echo $content;

JavaScript:

fetch('getContent.php?id=5')
.then(r => r.text())
.then(html => {
  document.getElementById('result').innerHTML = html;
});

Результат: замена содержимого элемента #result.