Ajax запит в jQuery. Частина 1

39

Від автора: вітаю вас, друзі. У цій статті ми почнемо працювати з Ajax запитами в jQuery. Бібліотека jQuery пропонує кілька методів для роботи з асинхронними запитами, використовуючи які ми можемо обмінюватися інформацією з сервером без перезавантаження сторінки, тобто асинхронно. Сьогодні ми познайомимося з методом ajax в jQuery.

Отже, в даній статті ми розглянемо найпростіший варіант роботи з методом ajax і деякими з його параметрів. Для роботи нам потрібно передусім форма:

Name
Email address

Submit

Ajax запрос в jQuery

Також нам необхідний сервер, адже ми саме туди і будемо відправляти асинхронний запит. В якості локального сервера рекомендую зупинити свій вибір на Open Server.

Якщо ми хочемо відправити дані з форми без перезавантаження сторінки, нам потрібно скасувати дефолтний поведінка форми. Як це зробити, ми вже знаємо, для цього, наприклад, можна використовувати метод preventDefault. Також нам необхідно подія відправки форми, і з цим ми також вже знайомі — метод submit якраз відповідає за таку подію. Отже, заборонити відправку форми можна наступним кодом:

$(function(){
$(‘form’).submit(function(e){
console.log(‘Відправка форми…’);
e.preventDefault(); // або return false;
});
});

Ajax запрос в jQuery

Відмінно! Залишилося зібрати дані з полів форми, які ми хочемо відправити на сервер методом ajax. Тут нам стане в нагоді метод serialize, який з полів форми створить рядок параметрів запиту URL. Давайте спробуємо:

$(function(){
$(‘form’).submit(function(e){
var data = $(this).serialize()
console.log(data);
e.preventDefault(); // або return false;
});
});

Ajax запрос в jQuery

Відмінно, все працює. Як бачимо, ім’я параметра збігається з ім’ям конкретного поля форми, а значення параметра — те, що ми набрали в полі. Прийшов час використовувати ajax запит. Використовуючи однойменний метод ajax необхідно передати у вигляді об’єкта наступні необхідні параметри (параметри запиту):

url — адреса, на який буде надіслано запит;

type — метод передачі даних (за замовчуванням GET);

data — ці дані;

success — функція, яка викликається після вдалого запиту до сервера й одержання відповіді;

error — функція, яка викликається в разі невдалого запиту до сервера.

Насправді параметрів куди більше, але перерахованих вище вам буде достатньо у більшості випадків. Тепер спробуємо сформувати запит:

$(function(){
$(‘form’).submit(function(e){
var data = $(this).serialize()
$.ajax({
url: ‘send.php’,
type: ‘POST’,
data: data,
success: function(res){
console.log(res);
},
error: function(){
console.log(‘помилка!’);
}
});
e.preventDefault(); // або return false;
});
});

Тепер набросаєм простий обробник, який прийме дані і поверне якоїсь відповідь:

Пробуємо відправити форму і отримати відповідь:

Ajax запрос в jQuery

Супер! Дані успішно відправлено і отримано відповідь. Код відповіді — 200, тобто все ОК. У відповіді ми отримали роздруківку масиву POST. Зверніть увагу на кілька моментів, це важливо! Відповіддю вважається лише вивід на екран (функціями echo, print_r тощо). Тобто якщо на сервері ми викличемо, наприклад, функцію, яка поверне якийсь результат, але нічого не виведе на екран, у цьому випадку ми отримаємо порожній відповідь. Це перший момент. Момент другий: після відповіді я зупинив подальше виконання скрипта функцією die. В даному випадку це не принципово, оскільки код скрипта отже завершився висновком. Проте в реальних проектах після обробника часто йде інший код і для того, щоб він не виконувався, відразу після відповіді не забувайте зупиняти скрипт.

На цьому ми, мабуть, зупинимося. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!