Вы здесь: Главная » Bootstrap » Bootstrap 4 » Ajax-запросы с помощью jQuery 3-й версии и модального окна Bootstrap 4

Ajax-запросы с помощью jQuery 3-й версии и модального окна Bootstrap 4

На данный момент актуальной является библиотека jQuery версии 3.4.1. Она может подключаться в версии slim (именно ее предлагает стандартный шаблон Bootstrap для взаимодействия со своими плагинами). Но этой slim-версии недостаточно для того, чтобы создавать анимационные эффекты и отправлять на сервер Ajax-запросы, что нам, собственно, и нужно рассмотреть в этой статье.

Подключение jQuery  3-й версии

В случае, если вы решили использовать AJAX на основе jQuery  3-й версии, вам необходимо подключить полную версию этой библиотеки, актуальную на момент создания вами скрипта. Например:

Далее вам необходимо будет создать саму форму, т.к. в скрипте вы будете получать данные из определенных полей, которые будут иметь свои атрибуты name, id или class, которые затем вы будете использовать при обработке события отправки формы на сервер (onsubmit).

Обработка формы обратного звонка с помощью AJAX

В нашем примере мы используем всего 2 текстовых поля - для имени пользователя и для телефона, т.к. отсылать будем сообщение об обратном звонке. Оформлять будем пример с использованием классов фреймворка Bootstrap 4, т.к. нам будет необходимо вывести сообщение об отправке формы в модальном окне. Поэтому разметка нашего файла будет основана на стандартном шаблоне Bootstrap 4:

В этом коде есть ряд моментов, на которые стоит обратить внимание:

  1. Тег form имеет в атрибуте class несколько наименований классов, отвечающих за форматирование, но класс order-form нужен будет нам для обращения к этой форме в JS;
  2. Еще одним атрибутом тега form является action="mail.php", который указывает на название файла, обрабатывающего данные формы на сервере. Файл лежит в той же папке, то и html-файл, и нужен для того, чтобы отравить письмо даже в том случае, если JS по каким-то причинам не загрузится или не сработает, например, при наличии в нем ошибок.
  3. В тегах input у нас существуют атрибуты name="name" для имени пользователя и name="phone" для его телефона. Данные на сервер уходят в виде пар name=значение, поэтому этот атрибут важен для передачи данных как с помощью Ajax, так и обычным способом.
  4. После каждого из тегов input находятся блоки <div class="error hidden"></div> для того, чтобы вывести замечания пользователю, если он неверно заполнил поля.  Изначально эти блоки спрятаны от пользователя. Стили для них просты:
  5. Кнопка, которая отправляет форму на сервер, имеет атрибут type="submit", то есть позволяет нам при клике на ней обработать событие onsubmit, и class="btn", который мы будем использовать в скрипте.

Создание PHP-файла

Этот файл у нас будет называться mail.php т.к. мы задали это в атрибуте action нашего тега form, и размещаться он будет в той же папке, то и html-файл. В этом файле нам нужно проверить, пришли ли на сервер нужные переменные, очистить их от пробелов и недопустимых символов, а также сформировать письмо и отправить его с помощью php-функции mail().

Отправка письма с помощью php-файла:

Этот файл отправит письмо даже в том случае, если не сработает Ajax-запрос, хотя случается это крайне редко.

Добавление html-разметки для модального окна с ответом

Для того чтобы вывести сообщение о получении заявки на обратный звонок от пользователя, заполнившего нашу форму, мы воспользуемся разметкой для создания модального окна в Bootsrap 4:

Для нас здсь важным будет атрибут id="messageModal". Текст для пользователя будет выведен в <div class="modal-body text-center">. Внутри этого элемента мы разместим абзац <p class="date"></p>, который изначально не имеет текста. В него мы будем добавлять строку о дате и времени получения заявки. Это необязательно на реальном сайте, но в нашем примере покажет, как обращаться к элементам модального окна и менять в нем текст.

Создание JS-файла

Поскольку мы подключили файл со скриптом в нижней части body, нет необходимости начинать скрипт на jQuery с конструкции

Мы можем писать наш скрипт сразу же в первой строке, без проверки загружен ли документ.

Обратите внимание на строку кода $('#messageModal').modal('show');. Мы используем ее для отображения модального окна с текстом о том, что заявка получена.

Кроме того, важным является сам Ajax-запрос, которыйс одной стороны, передает данные из полей нашей формы, размещенные в переменной data, с другой получает ответ, который может быть как успешным - в этом случае сработает код из функции done(), или неуспешным, т.е. ошибочным - и тогда сработает код из функции fail().

При отправке Ajax-запроса нужно обязательно указать путь к файлу-обработчику скрипта на сервере (url: 'mail.php' ),  тип передачи данных (type: 'POST' или 'GET') - лучше выбирать 'POST', т.к. он безопасней и позволяет передавать данные значительно большего объема, чем 'GET'. Вместо переменной data вы можете перечислить все нужные вам параметры, например:

Пример вживую:

Вы можете открыть и протестировать данный пример с отправкой формы на Ajax и jQuery 3.4.1 в новой вкладке.

Ввод в поле с телефоном только цифр с помощью jQuery-плагина

Для того чтобы уменьшить количество проверок и упростить ввод телефона с клавиатуры, мы воспользуемся плагином Input Mask Plugin For Phone Numbers, который создает нам маску для ввода только цифровых символов. Мы уже подключили его при создании html-разметки нашего файла строкой

А в js-файле в самом верху запишем очень простой код  для использования этого плагина:

После этого все элменты форм c атрибутом type="tel", даже если у вас на странице их будет несколько, будут подчинятся действию этого плагина. Пользователь не сможет ввести никаких других символов, кроме цифр. Кроме того, при вводе цифр, автоматически будут добавлены скобки и знак дефиса.

Формат для номера телефонаНиже вы найдете ссылки на плагин, использованный в нашем примере, и другие плагины, которые позволяют работать с телефонными номерами и датами.

  1. Ссылка на документацию jQuery Ajax
  2. Ссылка на плагин для проверки телефонного номера 1
  3. Ссылка на плагин для проверки телефонного номера 2
  4. Ссылка на плагин для проверки телефонного номера 3

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *