Ajax-форма зворотного зв'язку на jquery

Ajax-форма зворотного зв'язку на jquery

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

Бібліотека jQuery дуже зручний інструмент. Вона дуже сильно спрощує роботу з ajax-запит, для цього у неї є спеціальна конструкція.

Робочу форму, а так само її створення можна знайти в іншій нашій статті Проста форма зворотного зв'язку своїми руками. Або відразу завантажити готовий приклад з тієї статті:

Так, як ми працюємо з бібліотекою jQuery. не забуваємо підключити її в файлу index.html наступним рядком:

Тепер створимо папку js. в яку помістимо наш майбутній скрипт у файлі під назвою ajax.js. Підключаємо цей файл в index.html. наступним рядком в :

Тепер додамо id тегом

. нехай, як би це не було банально він буде зі значенням form.

Ось як буде виглядати наша форма тепер:

Відкриваємо файл ajax.js і додаємо туди наступний код:

Варто звернути увагу на 7 сходинку. де задається обробник форми, шлях потрібно вказувати так, щоб скрипт знайшов його, інакше повідомлення не будуть відправлятися і ви будете довго ламати голову - чому. Дивитися то, знайшов скрипт чи ні, можна в Засобах розробника будь-якого браузера.

Ми записали функцію, яка буде відправляти дані через ajax, тепер додамо з типом submit подія onClick (Виконує при натисканні на елемент), за яким і буде викликатися ця функція.

Ось як виглядатиме форма повністю:

Якщо тепер спробувати послати повідомлення, то сторінка все одно перезавантажиться, тому що для з типом submit це закладено в коді за замовчуванням. Проблема вирішується зміною типу на button:

Ajax-форма зворотного зв'язку на jquery

А вихідні завантажити за посиланням нижче:

Схожі статті