Контактна форма без перезавантаження сторінки. Надсилання довільної форми на AJAX без перезавантаження сторінки Без перезавантаження сторінки php ajax

Всім привіт, при розробці веб-додатків відбувається взаємодія клієнтської частини і серверної, наприклад, у роботі з базою даних необхідно додавати, редагувати або видаляти записи. Найчастіше все відбувається за налагодженою схемою у вигляді GET або POST запитів. Однак є невеликі незручності - серед яких можна виділити основне, при відправці даних PHPскрипт повертає відповідь від сервера і це відбувається на іншій сторінці, а якщо це масове введення даних – стає незручно вводити дані, відсилати їх у базу, отримувати відповідь на новій сторінці, а потім повертатися на сторінку введення.
Щоб прискорити та спростити роботу оператору, скористаємося динамічним додаванням даних без перезавантаження сторінки з використанням інструментів ajax та jquery, а підвантажувати інформацію будемо циклом foreach php. Іншими словами ми будемо надсилати дані в базу за допомогою ajax методів і чекатимемо відповіді від PHP про успішне виконання запиту та відображати результат.
Відбувається фоновий обмін даними між браузером і сервером і при цьому веб-сторінка не перезавантажується повністю, а лише оновлюються необхідні дані
Щоб розглянути як це працює – звернімося до прикладів. У нашому випадку створимо невеликий web-додаток для додавання імені та по батькові до бази даних.
Тож почнемо:
Для початку створимо файл index.php в якому опишемо стилі, веб форми та механізм взаємодії з сервером для управління даними.
Розділ HEAD тут прописуємо необхідні бібліотеки jquery для обміну даними, bootstrap фрейморк для надання більш представницького вигляду нашому додатку. Також визначимо деякі стилі:

На наступному етапі опишемо зовнішній виглядсторінки програми тег body

Не забудемо ще про створення модального вікна додавання або редагування даних, яке з'являтиметься при натисканні на кнопку “Додати запис” і зробимо його прихованим, а викликатимемо його після натискання кнопки Додати запис

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

Обнуляємо змінні та створюємо модальне вікно заново

JQuery код для обробки натискань на клавіші під час додавання або редагування даних.

Наступний блок коду відповідає за оновлення даних – при натисканні на кнопку Оновити

При натисканні на кнопку Видалити спрацьовує цей код

З файлом index.php покінчили, клієнтська частина готова, настав час зробити серверну частину яка прийматиме запити виконувати необхідні дії та відправляти відповідь у клієнтську частину програми.

Отже, назвемо файл action.php і згодом будемо до нього звертатися з index.php.

Створюємо з'єднання з базою даних

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

Обробляємо натискання кнопки оновити інформацію наступним кодом

2 years ago | 76.1K

Що таке AJAX

При розробці сайтів буває, що у нас виникає потреба надіслати дані html-форми без перезавантаження сторінки у фоновому режимі (з використанням AJAX). У цій статті ми розглянемо це питання та покажемо на прикладі як реалізувати наше завдання за допомогою мов jquery та php. Ми отримаємо скрипт, при виконанні якого сервер відправляє, а клієнт отримує дані у форматі JSON.

Технологія Ajax стала популярною і часто застосовується під час створення сайтів у WEB 2.0. Багато вже успішних або початківців web-сайтів прагнуть створити зручність для своїх користувачів, що важливо в умовах конкуренції та величезної кількості інтернет-ресурсів. Крім того, Ajax-технологія допомагає збільшити швидкодію вашого сайту. Це відбувається завдяки тому, що користувач не перевантажує сторінку, коли необхідно оновити тільки деякі елементи/частини вашого сайту.

Розберемося як без перезавантаження сторінки виконати надсилання даних форми за допомогою Ajax

Тут ми створимо демо-проект, який включатиме 3 файли:

index.php - це головна сторінка, на якій розміщена сама форма

ajax.js - це файл javascript, в якому міститься алгоритм ajax для обробки форми

action_ajax_form.php - це серверна частина, яка відповідає за обробку отриманих від форми даних та повертає клієнту відповідь у форматі JSON

Створіть перший файл під назвою index.php з таким вмістом:

Телефон: "+result.phonenumber); ), error: function(response) ( // Дані не надіслано $("#result_form").html("Помилка. Дані не відправлені."); ) ));

У файлі ajax.js є два методи: $("#btn").click та sendAjaxForm. Перший метод – це слухач подій кнопки. Тобто, коли ми натискаємо кнопку "Надіслати", слухач спрацьовує і викликає метод sendAjaxForm.

У метод sendAjaxForm(result_form, ajax_form, url) передаються поля: result_form - це div в який будуть рендерувати дані, ajax_form - це id форми відправки повідомлення і url - це місце розташування файлу action_ajax_form.php який відповідає за серверну частину (обробка форми).

Створимо останній файл – action_ajax_form.php

action_ajax_form.php – це обробник форми на стороні сервера. Цей файл відповідає за backend частина нашої міні-програми. Наприклад, ми робимо перевірку: Якщо є змінні в POST запиті name і phonenumber, тоді ми формуємо масив $result для JSON відповіді від сервера. Потім, масив $result, ми переводимо в JSON об'єкт, щоб клієнт ajax.js зміг коректно отримати дані у форматі JSON.

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

Користувач натискає на сайті кнопку Відправити, Браузер робить запит на сервер, у відповідь сервер віддає заново сформовану сторінку і відправляє її назад браузеру, так і відбувається перезавантаження сторінки.

Що відбувається за AJAX технології? Початок такий самий, тільки сервер інакше відповідає - він не формує нову сторінку, а повертає тільки ту область сторінки, яка вимагалася. JS скрипт впливає на елементи точково, тому повністю сторінка не перезавантажується. Чим це добре? Найменша кількість запитів до бази даних знижує навантаження на сервер і відповідно збільшує швидкість роботи сайту.

Які файли потрібні

Назви файлів довільні.

index.html - файл із формою на HTML
mail.php - обробник, що приймає дані з форми та відправляє на емайл замовника
send.js - скрипт, що надсилає дані з форми в PHP обробник, без перезавантаження сторінки

Вміст index.html

Проста форма з двома полями введення для імені та телефону, обов'язковими для заповнення (required) та кнопка відправити. Після форми ми підключили зовнішню бібліотеку jQuery і файл зі скриптом send.js . У даній формі немає атрибуту action, де вказується PHP обробник і не вказані методи GET/POST. У технології AJAX ці методи вказуються в JS скрипті. Відсутність на сторінці слова action зменшує кількість спаму через вашу форму.

Відправити

PHP обробник

Обробник mail.php буде надсилати нашу форму на сервер. Створимо змінні з емайлом одержувача (можна через кому додавати ще адреси) та назвою сайту.

Створимо змінні ім'я та телефон, отримуючи їх методом POST із форми. Створимо змінну повідомлення, яке прийде одержувачу на пошту, в якій міститься ім'я та номер телефону.

Створюємо змінну теми повідомлення в email та функцію mail з змінними одержувача, теми повідомлення та самим повідомленням.

Як тільки користувач заповнить форму і натисне кнопку, замовник / адміністратор отримає на свій емайл дані з форми про заявку, залишену користувачем. Так це працює.

JS скрипт - send.js

Скрипт виконається, коли завантажиться дерево DOM.

$(document).ready(function() (

Перевірка на заповненість полів, форма не вирушає, якщо хоча б одне поле залишиться порожнім. Атрибут HTML5 - required, підтримується не всіма браузерами.

$("#form").submit(function() (

Відповідає за відправку даних у PHP обробник через метод AJAX. Збираємо всі дані з нашої форми і за допомогою функції serialize перетворюємо їх у рядок для надсилання POST методом на mail.php.

Метод done підтверджує успішність виконаних дій.

)).done(function() (
$(this).find("input").val("");

Після відправки даних на mail.php користувач бачить вікно з підтвердженням, що заявка отримана. Функція trigger дозволяє закрити вікно, натиснувши кнопку OK .

Alert("Ваша заявка прийнята! Дякую.");
$("#form").trigger("reset");
});
return false;
});
});

Користувач заповнює форму, натискає кнопку відправити і моментально, без перезавантаження сторінки, вискакує вікно з написом, що ваша заявка прийнята. Це і є AJAX-метод.

Демо приклад відправлення форми

Створювати AJAX-форму без перезавантаження сторінки цікаво. А ще цікавіше "вдихати життя" у сторінки, цьому навчить вас мій відеокурс

Якщо ви тільки почали вивчати PHP і вже створювали форми для надсилання даних GET та POST запитами, то напевно замислювалися: «Як обробляти дані та оновлювати їх без перезавантаження сторінки?». У цій статті ми на найпростішому прикладі покажемо, як реалізувати таку обробку, а допоможе нам у цьому AJAX.

AJAX (Asynchronous Javascript and XML) – це технологія, яка дозволяє web-додаткам виконувати код Javascript без перезавантаження сторінки. Точніше оновлюється не вся сторінка, а лише та частина, яка нам потрібна, внаслідок чого значно зростає швидкодія інтерфейсу.

Реалізуємо відправку даних із списку, обробку цих даних на сервері, і повернення оброблених даних назад клієнту.

Для початку необхідно імпортувати бібліотеку JQuery для працездатності AJAX. Усередині тега

вашого проекту прописуємо:

Категорія не обрана Легкові Вантажні Спец.техніка

AJAX працює з HTML елементами через атрибут id, тому не забуваймо прописати його нашій формі.

Поза формою створимо кнопку для відправки та блок div, у який виводитимемо отриманий результат:

Відправити

При натисканні на кнопку запускатиметься функція, прописуємо її назву в атрибуті onclick. Задаємо ID для блоку.

Ну і тепер перейдемо до найцікавішого – створення функції.

Дамо їй назву send. За допомогою функції serialize перетворимо набір елементів з нашої форми в рядок, придатний для передачі в обробник. У url пропишемо шлях до оброблювача, який створимо пізніше. Передамо дані з msg. Відбувається запит у обробник.

Тепер потрібно створити обробник. Ім'я йому ми вже задали – auto_result.php. Додамо до нього наступний код:

Цей обробник отримує дані про категорію методом POST, і надсилає номер категорії клієнту. Якщо категорію не вибрали, то надсилається значення «no».

Повернемося до функції send. Всередині неї функція success отримує номер категорії, надісланий обробником. Після цього відбувається вибір повідомлення, що виводиться на основі отриманої категорії.

У цьому реалізація найпростішої динамічної обробки завершено.

Дивіться всі найкрутіші приклади з Ajax

Нещодавно я зіткнувся з цілком, на мою думку, поширеним завданням: потрібно забезпечити користувачеві можливість завантажити на сервер будь-яке число, скажімо, картинок з коментарем до кожної з них у рамках одного інтерфейсу. У моєму випадку це було: фото товару, його опис та кількість. Для наочності прикладаю скріншот інтерфейсу: Ідея та алгоритм рішення Так як описи та фотографії для отримання кінцевого результату можна змінювати дуже багато разів, вирішено було здійснити наступну схему роботи: фотографії завантажуються на сервер на одній при натисканні на фото-іконку, при цьому у разі успіху сервер повертає ім'я картинки, а при неуспіх - "error". Відповідно, у разі успіху, фото-іконка замінюється на мініатюру завантаженого фото, а в приховане поле форми відповідного рядка зберігається її ім'я, а при неуспіх ми отримуємо фото-іконку і порожнє приховане поле форми відповідного рядка, що відповідає за ім'я фото. Текстова інформація при зміні будь-якого поля форми відправляється на сервер вся у форматі масив [ім'яФото, описДеталі, кількістьШт] - це найбільш універсально: один і той же метод відповідає за повне оновлення списку товарів при їх редагуванні або видаленні. Як відомо, AJAX не вміє надсилати файли, тому реалізуємо процедуру завантаження за допомогою звичайної форми, як target якої вкажемо прихований кадр, який і перезавантажуватиметься замість сторінки.

Практична реалізація Отже, у нашому розпорядженні HTML, PHP та Javascript. Поїхали:

1. Верстаємо форму на сторінці для завантаження фото. Вона містить лише один input, який ми сховаємо за допомогою css: