Отримання даних від сервера в jQuery
Нагадую, що ідея полягає в тому, щоб отримати дані від сервера асинхронно за допомогою HTTP-запиту та змінити сторінку користувача без перезавантаження.
Для того, щоб звертатися на сервер за даними, створимо API з тестовими даними за допомогою сервісу mocky.io.
Ось у мене є JSON даних
Вставляємо його в body запиту та в advance mode вибираємо
Щоб будь-який домен міг звертатися до цього API.
Натискаємо Generate response та отримуємо посилання на наш API.
Тепер погляньмо на мою заготівлю для уроку. Це просто базовий html файл, до якого підключено два скрипти jquery та code.js у якому ми писатимемо код.
Давайте напишемо код, який отримає дані від сервера.
Якщо ми подивимось у браузер, то у нас вивівся в консоль наш масив об'єктів.
Якщо ми змінимо посилання на неправильне, то потрапимо в error.
У $.ajax можна використовувати методи done і fail, які є аналогами then і catch, але я раджу дотримуватися в роботі з будь-якими промісами використання then і catch, так як це ближче до стандарту. Наприклад, у es6 промісах у вас теж будуть the і catch, а це означає, що код буде виглядати однаково.
У $.ajax можна задавати безліч різноманітних опцій, але я перерахую тільки найвикористаніші з них.
Перше це звичайно метод. За замовчуванням він get і ми можемо міняти його наприклад на post, щоб надіслати запит post.
Звичайно, найчастіше в POST запит ми хочемо передати якісь дані. У цьому нам допоможе поле data
Якщо ми подивимося на network, то побачимо, що дані передаються.
Також у jQuery є аліаси методу $.ajax. Це $.get, $.post, $.getJSON, які хоч і більшекороткі, але мій погляд менш читабельні і краще дотримуватися повного запису.
Нагадую, що $.ajax, це лише обгортка нам стандартним для javascript XMLHttpRequest.
Які основні переваги вона нам дає?
- Як результат виконання ми отримуємо проміс, а це означає з ним дуже зручно працювати за допомогою .then та .catch
- Дуже простий API. Ми просто вказуємо об'єктом налаштування і все працює.