Простой запрос Ajax с помощью jQuery и PHP

Применение Ajax-запросов позволяет динамически обновлять данные на сайте без перезагрузки страницы, улучшая пользовательский опыт. В этой статье мы подробно рассмотрим простые примеры запросов с использованием jQuery, которые легко внедрить в любой проект.

Вы научитесь отправлять и получать данные с сервера в несколько строк кода, не затрудняя работу сайта. Такие навыки помогут сделать вашу работу с интерфейсами сайтов более гибкой и эффективной.

Обновлено: 2025-06-20 13:19:28 Сергей Бензенкоавтор материала

Пример запроса GET, отправленного с помощью jQuery и Ajax

$.ajax({
    type: "GET",
    url: 'test.php',
    success: function(data){
        alert(data);
    }
});

В примере кода передаются три параметра:

• type: тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
• url: адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
• success: функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.

Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.

Что если мы захотим добавить параметры запроса GET к Ajax-запросу?

$.ajax({
    type: "GET",
    url: 'test.php',
    data: {name:'Wayne'},
    success: function(data){
        alert(data);
    }
});

Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne

Пример добавления нескольких параметров GET

$.ajax({
    type: "GET",
    url: 'test.php',
    data: {name: 'Wayne', age: 27, country: 'Ireland'},
    success: function(data){
        alert(data);
    }
});

Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland

Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.

А если мы хотим отправить запрос POST к файлу submission.php?

$.ajax({
    type: "POST",
    url: 'submission.php',
    data: {name:'Wayne', age: 27},
    success: function(data){
        alert(data);
    }
});

Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:

$name = $_POST['name'];
$age = $_POST['age'];

Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:

$name = $_GET['name'];
$age = $_GET['age'];

Последней частью паззла является функция success(). Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.

Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!

Сергей Бензенкоавтор-переводчик статьи «Simple Ajax request example with JQuery and PHP»