Ajax - это технология, позволяющая выполнять обработку действий пользователя без перезагрузки страницы. Иными словами, для примера, когда вы слушаете музыку в социальных сетях, вы можете переходить по страницам, но при этом музыка у вас не прерывается.
Технология Ajax стала неотъемлемой частью WEB 2.0 и в настоящий момент, успешные веб-сайты стремятся создать удобство для пользователей. Более того, технология Ajax позволяет увеличить скорость работы вашего сайта, за счет того, что пользователю для обновления некоторых элементов вашего сайта не нужно перезагружать всю страницу.
Наш демонстрационный проект будет состоять из трех файлов:
index.php - это главная страница с формой
ajax.js - это javascript файл с логикой ajax обработки формы
action_ajax_form.php - это серверная часть нашего проекта, обрабатывает данные полученные из формы и возвращает результат в формате JSON
Создадим первый файл нашего AJAX проекта под названием index.php с таким содержимым:
Мы подключили библиотеку Jquery и наш javascript файл отвечающий за взаимодействие с кнопкой отправки форми, с файлом action_ajax_form.php.
Обратите внимание, что метод отправки формы у нас POST, задан id="ajax_form" и action="". Также после формы мы добавили div c id=result_form. Именно в этот div мы будем выводить результат обработки формы.
Также нам нужно создать второй файл - ajax.js
В файле 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 - обработчик формы на стороне сервера. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код AJAX формы, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
Если есть вопросы, относительно этой статьи, оставляйте свои комментарии и мы попробуем помочь разобраться, если что-то не заработает.
XAMPP - как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Что такое реферальный спам в Google Analytics
Постраничная ленивая загрузка (lazy load) постов
Как стать профессиональным веб-разработчиком
Методы setTimeout и setInterval в Javascript
Реализация Lazy Load на Jquery
Три полезных CSS свойства для работы с изображениями
Sublime Text 3 - удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
