Як динамічно завантажувати контент сторінки за допомогою ajax і jquery

У цьому підручнику ми візьмемо середній звичайний веб-сайт і поліпшимо його за допомогою jQuery. Ми додамо AJAX-функціональності, яка дозволить вмісту динамічно завантажувати контент. без перезавантаження сторінки, в відповідний контейнер. Замість того, щоб змушувати користувача переходити на іншу сторінку. А також інтегруємо деякі приголомшливі анімаційні ефекти.

Для прикладу я спочатку побудував дуже простий макет. Ось скріншот і HTML-код, який ми будемо використовувати.

Спочатку підіть і скачайте останній стабільний реліз jQuery і додайте посилання на нього в ваш документ:

Як я вважаю, одна з кращих рис jQuery - це його простота. Можна досягти поставленого завдання в поєднанні з приголомшливими ефектами всього кількома рядками коду.

По-перше, давайте завантажимо бібліотеку jQuery і запустимо функцію, коли документ уже готовий (коли DOM вже завантажений).

Нам потрібно зробити так, щоб при натисканні на посилання в меню навігації на нашій сторінці, браузер не робив перехід на відповідну сторінку, а динамічно завантажував контент цієї сторінки всередину нашого макета, без перезавантаження.

Для цього нам потрібно визначити посилання в меню навігації і запускати цю функцію при натисканні на них:

Давайте визначимо, що ми повинні зробити в цій функції по порядку.

Видалити вміст поточної сторінки.

Отримати новий вміст сторінки і додати в вміст DIV.

Щоб наочно продемонструвати, що робить вищевказаний код, давайте уявимо, що користувач натискає на посилання 'about'. яка пов'язана зі сторінкою 'about.html' - в цій ситуації змінної буде: 'about.html #content' - і це саме та змінна, яку ми будемо запитувати при простому виклику. Однак перше, з чого ми почнемо - це створимо гарний ефект для вмісту поточної сторінки. Замість того, щоб воно просто зникало, ми використовуємо функцію «приховування» jQuery:

Зазначена функція швидко «ховає» #content div, і як тільки ефект закінчує свою дію, вона, в свою чергу, ініціює функцію «loadContent» (завантаження нового вмісту [через ajax]) - це функція, яку ми визначимо пізніше (в кроці 4 ).

Як тільки старе вміст зникне з приголомшуючим ефектом, нам не можна просто залишити користувачів в очікуванні, поки не з'явиться новий вміст (особливо якщо у них повільне з'єднання з Інтернетом), так що ми створимо трошки графіки «завантаження» щоб користувачі знали, що щось відбувається у фоновому режимі:

Ось CSS, що додається до свіжоствореному #load div:

Таким чином область, яка повинна містити анімацію завантаження, спочатку не відображається. Далі, при ініціалізації функції fadeIn () (див. Вище в коді), вона починає відображатися у верхньому правому куті сайту і показує анімований GIF, поки через деякий час знову не зникне з екрану.

Через деякий час, коли користувач натисне на одну з посилань, почне відбуватися наступне:

З'являється повідомлення про завантаження.

А тепер давайте напишемо ту саму функцію завантаження вмісту, про яку ми раніше говорили:

Функція loadContent викликає запитану сторінку, а коли це вже виконано, викликає функцію 'showNewContent' (показ нового вмісту):

Ця функція - showNewContent - використовує функцію show () jQuery (насправді, це дуже нудне назву для такого відмінного ефекту) з тим, щоб нове вміст, позначене міткою елемента '#content' з'явилося на сторінці. Одного разу викликана, вона ініціює функцію 'hideLoader' (зникання):

Нам необхідно пам'ятати, що функція обробки кліка повинна повернути «false», щоб браузер не зробив переходу на іншу сторінку.

Тепер все має працювати прекрасно. Приклад цього можна побачити тут: [LINK]

Вищевказаний код змінює значення URL на значення натиснутого атрибута 'href' (за винятком розширення '.html'). Тому, коли користувач клацає посилання 'home' (href = index.html), то хеш-значення буде виглядати як '#index'.

Кінець ...

На цьому, випуск присвячений створенню динамічного завантаження контенту, без перезавантаження сторінки, засобами AJAX і jQuery, завершено.

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі

файлу не існує, що знаходиться на відстані ...

Я хочу, щоб все робилося за мене, а я тільки сидів у мами на колінах і цицю смоктав, так чтоли?