AJAX и PHP простые примеры отправки и получения данных

2 21 января 2026

Что такое AJAX ?

AJAX (Asynchronous jаvascript and XML) — это способ обмена данными между браузером и сервером без полной перезагрузки страницы. Сейчас чаще всего используют JSON вместо XML — это проще и удобнее.

Применение AJAX удобно для:

динамических форм;
проверки данных на лету;
подгрузки списков или таблиц;
отправки данных в фоне (например, сохранение черновиков).

Как работает AJAX с PHP ?

Пользователь взаимодействует со страницей (например, вводит данные в форму или нажимает кнопку).
jаvascript отправляет AJAX-запрос на сервер XMLHttpRequest или fetch.
PHP-скрипт на сервере обрабатывает запрос, выполняет операции с БД или файлами и формирует ответ.
Ответ (текст, HTML или JSON) возвращается браузеру.
JS обновляет страницу без перезагрузки.

Пример 1 — простая отправка данных через POST

HTML + JS:

<input type="text" id="name" placeholder="Введите имя">
<button id="send">Отправить</button>
<div id="result"></div>

<script>
document.getElementById('send').addEventListener('click', function() {
    const name = document.getElementById('name').value;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'process.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
        if(xhr.status === 200){
            document.getElementById('result').innerText = xhr.responseText;
        } else {
            document.getElementById('result').innerText = 'Ошибка запроса';
        }
    };

    xhr.send('name=' + encodeURIComponent(name));
});
</script>

PHP (process.php):

<?php
if(isset($_POST['name'])){
    $name = htmlspecialchars($_POST['name']);
    echo "Привет, $name!";
} else {
    echo "Имя не отправлено!";
}
?>

Что происходит:
Пользователь вводит имя → JS отправляет POST-запрос → PHP возвращает текст → JS отображает его на странице без перезагрузки.

Пример 2 — отправка и приём JSON через fetch

JS:

const data = {name: 'Сергей', age: 17};

fetch('process_json.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
.then(res => res.json())
.then(result => console.log(result.message))
.catch(err => console.error('Ошибка:', err));

PHP (process_json.php):

<?php
$json = file_get_contents('php://input');
$data = json_decode($json, true);

if($data){
    $name = htmlspecialchars($data['name']);
    $age = (int)$data['age'];
    echo json_encode(['message' => "Привет, $name! Вам $age лет."]);
} else {
    echo json_encode(['message' => "Данные не получены!"]);
}
?>

Что происходит:
JS отправляет JSON → PHP декодирует, обрабатывает и возвращает JSON → JS выводит результат в консоль или на страницу.

Пример 3 — динамическая подгрузка списка пользователей

HTML + JS:

<button id="loadUsers">Показать пользователей</button>
<div id="users"></div>

<script>
document.getElementById('loadUsers').addEventListener('click', () => {
    fetch('get_users.php')
    .then(res => res.json())
    .then(data => {
        let html = '<ul>';
        data.forEach(u => html += `<li>${u.name} (${u.email})</li>`);
        html += '</ul>';
        document.getElementById('users').innerHTML = html;
    });
});
</script>

PHP (get_users.php):

<?php
$users = [
    ['name'=>'Алексей','email'=>'alex@example.com'],
    ['name'=>'Мария','email'=>'maria@example.com']
];

header('Content-Type: application/json');
echo json_encode($users);
?>

Что происходит:
При клике JS делает GET-запрос → PHP возвращает список пользователей в JSON → JS формирует HTML и вставляет на страницу без перезагрузки.

Советы по работе с AJAX + PHP

Всегда проверяйте данные на сервере.
Используйте экранирование htmlspecialchars и приведение типов (int).
Для JSON не забывайте заголовки Content-Type: application/json.
Обрабатывайте ошибки на фронтенде через .catch() или xhr.status.
Для защищённых операций добавляйте CSRF-токены.
Логируйте ошибки на сервере, но пользователю показывайте нейтральные сообщения.

Заключение

AJAX + PHP — простой и мощный способ сделать сайт интерактивным. С помощью этих примеров можно быстро отправлять формы, получать JSON-данные и обновлять части страницы без перезагрузки, улучшая UX и скорость работы сайта.