Php обновление формы без перезагрузки. Используем PHP, jquery, ajax и foreach для редактирования без перезагрузки страницы

Всем — привет. Сегодня решил взяться за переработку статьи об , которая открывалась в модальном окне. Статья достаточно популярна, но имела некоторые проблемы. Дело в том, что после отправки данных, выводилось сообщение об успешной отправке и не позволяло больше отправлять письма до перезагрузки страницы. Многие из вас спрашивали, как сделать так, чтобы сообщение не заменяло форму и позволяло повторно отправлять письма. В этой статье мы это исправим и не только.

Еще, у прошлой статьи был, наверное, недостаток в том, что сложно было подключить несколько форм, а именно, нужно было дублировать скрипт, обрабатывающий форму, что не очень красиво. В этой статье поправим и этот момент. Кроме того, форма будет работать и без модального окна.

Ах да, приведу в порядок айдишники и классы, чтобы легче понималось что и зачем. Изменю дизайн формы, так интереснее. В одной из следующих статей, возможно, подключим к этой форме reCapthсa от Google, и настроем цель «Событие», при успешной отправке, так что готовится целый цикл статей.

Давайте приступим. Так как модальное окно будет вызываться при помощи jQuery плагина Remodal , то перед закрывающимся тегом подключим сам jQuery и плагин Remodal. Ниже добавим скрипт, который будет отвечать за отправку формы без перезагрузки страницы. Выглядит это следующим образом:

Обратите внимание на путь к файлам. Я решил поместить практически все файлы в папку modalform, чтобы легче было подключать к проекту.

Прежде чем перейти к разметке формы, подключим css файлы модального окна. Я делаю это между тегами head:

Итак, теперь перейдем к разметке самой формы и кнопки вызывающей ее. Начнем с кнопки.

Оставить заявку

Тут — все просто. Обычная ссылка с произвольным классом. Data-remodal-target используется для того, чтобы вызвать модальное окно, аналогично, если бы использовался href со ссылкой на id. Но зачем нам этот мусор в адресной строке. В свою очередь модальное окно с формой выглядит следующим образом:

Закажите обратный звонок и наш консультант свяжется с вами

сайт

Хоть кода, на первый взгляд, достаточно много, на самом деле все не так сложно. Вся форма обернута в div c классом remodal. У него есть data-remodal-id с таким же параметром как у кнопки. То есть firstForm. Именно благодаря им, при клике на кнопку открывается нужное окно, в случае, если на странице их несколько.

Data-remodal-options — один из способов задать или отключить некоторые возможности скрипта для модального окна. Подробнее можно почитать на официальном из сайте. Ссылку уже давал выше. В моем случае. Я отключил появление якоря в адресной строке и запретил закрытие окно после нажатия кнопки «отправить».

Внутри сама форма с fieldset(ами). Здесь важно обратить внимание, на параграф с классом «msgs». Именно сюда будет выводиться сообщение об успешной отправке или ошибке. Раньше сообщение выводилось прямо внутри формы, заменяя весь контент внутри.

Еще один момент. Скрытое поле c классом formInfo. Оно нужно для того, чтобы отличать заявки и понимать какую именно форму заполнил пользователь, в случае, если их несколько разных. Просто заполняем нужным текстом значение value.

В конце статьи, я покажу как сделать так, чтобы вызывать окно из разных мест на сайте и понимать, на какую именно кнопку нажал пользователь.

Теперь давайте посмотрим на скрипт, который поможет нам отправить форму без перезагрузки страницы. Я назвал его form.js:

$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); // Ищет класс.msgs в текущей форме и записываем в переменную var formTitle = $(formNm).find(".formTitle"); // Ищет класс.formtitle в текущей форме и записываем в переменную $.ajax({ type: "POST", url: "modalform/mail.php", data: formNm.serialize(), success: function (data) { // Вывод сообщения об успешной отправке message.html(data); formTitle.css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); }, error: function (jqXHR, text, error) { // Вывод сообщения об ошибке отправки message.html(error); formTitle.css("display","none"); // $(formNm).css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); } }); return false; }); //для стилей формы var $input = $(".form-fieldset > input"); $input.blur(function (e) { $(this).toggleClass("filled", !!$(this).val()); }); });

Давайте немного поясню, что тут происходит. Мы вызываем функцию, когда произошло событие submit у формы (нажали на отправку). Затем получаем id формы и сохраняем в переменную formNm. Теперь, id нашей формы в ней. В прошлой статье именно сюда выводилось сообщение. И именно об этом моменте я так часто писал в комментариях. Нужно просто указать другое место для вывода. В нашем случае мы все сообщения будем выводить в заранее подготовленное место. Это тег «p» с классом «msgs».

В скрипте, говорим, что на время показа сообщения об успешной или не успешной отправке, скроем заголовок. А через 3 секунды вернем все на место и отчистим поля формы вместе с сообщением.

Файл, который отправит полученные данные — mail.php. Вот его код:

Данный обработчик получает данные о категории методом POST, и отправляет номер категории клиенту. Если категория не была выбрана, то отправляется значение «no».

Вернемся к функции send. Внутри нее функция success получает номер категории, отправленный обработчиком. После этого происходит выбор выводимого сообщения на основе полученной категории.

На этом реализация простейшей динамической обработки завершена.

Смотрите все самые крутые примеры по Ajax

Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.

Реализация AJAX довольно сложна с технической точки зрения. На самом деле происходит работа API XMLHttpRequest , который и выполняет всю работу. Чтобы упростить код, используются функции-«обертки», которые освобождают нас от сложного программирования XMLHttpRequest. В jQuery для этого используются функци ajax , а также её «модификация» post . При этом, если jQuery не нужна, то в Сети можно найти другие библиотеки, реализующие функционал AJAX, например Selector (которая вообще выступает как легковесная замена jQuery).

Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.

Многие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.

На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.

Почти всегда это происходит так:

• На html-странице создается форма с нужными полями.
• Перед отправкой, данные формы серилизуются и данные уходят к php-обработчику на сервере.
• Обработчик, выполнив свою работу, возвращает ответ. Это может быть какие-то данные или готовый html-код.
• Этот ответ размещается в заданном блоке на странице.

Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.

Вначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.

Отправка формы на AJAX ... тут будет наш код...

Теперь создадим простую форму и блок ответа.

Имя: Телефон: Отправить

В первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action . Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id , по которому и сможем идентифицировать форму.

Кнопка имеет тип submit . На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.

Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:

Отправить Имя: Телефон:

Блок #my_message служит для вывода ответа.

При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:

$("#my_form").submit(function(){ alert("Нажата submit-кнопка"); return false; });

Чтобы заблокировать отправку и перезагрузку страницы, функция возвращает false . Саму же обработку мы разместим вместо alert() , но перед этим разберемся что предлагает jQuery для отправки аякс-запроса.

2 years ago | 76.1K

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

Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, 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.

Всем привет, при разработке веб приложений происходит взаимодействие клиентской части и серверной например в работе с базой данных необходимо добавлять, редактировать или удалять записи. Зачастую все проходит по отлаженной схеме в виде GET или POST запросов. Однако есть небольшие неудобства – среди которых можно выделить основное, при отправке данных PHP скрипт возвращает ответ от сервера и это происходит на другой странице, а если это массовый ввод данных – то становится неудобно вводить данные, отсылать их в базу, получать ответ на новой странице, а затем возвращаться на страницу ввода.
Чтобы ускорить и упростить работу оператору воспользуемся динамическим добавлением данных без перезагрузки страницы с использованием инструментов ajax и jquery, а подгружать информацию будем циклом foreach php. Другими словами мы будем отправлять данные в базу с помощью ajax методов и ждать ответа от PHP о успешном выполнении запроса и отображать результат.
Происходит фоновый обмен данными между браузером и сервером и при этом веб страничка не перезагружается полностью, а лишь обновляются необходимые данные
Чтобы рассмотреть как это работает – давайте обратимся к примерам. В нашем случае создадим небольшое web-приложение для добавления имени и отчества в базу данных.
Итак начнем:
Для начала создадим файл index.php в котором опишем стили, веб формы и механизм взаимодействия с сервером для управления данными.
Раздел HEAD здесь прописываем необходимые библиотеки jquery для обмена данными, bootstrap фрейморк для придания более представительного вида нашему приложению. Также определим некоторые стили:

На следующем этапе опишем внешний вид страницы приложения тэг body

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

Ну а дальше за тэгом идет логика отвечающая за отображение информации на стороне клиента, а также отправка и получение результата от сервера.

Обнуляем переменные и создаем модальное окно заново

JQuery код для обработки нажатий на клавиши при добавлении или редактировании данных.

Cледующий блок кода отвечает за обновление данных – при нажатии на кнопку Обновить

При нажатии на кнопку Удалить срабатывает этот код

C файлом index.php покончили, клиентская часть готова, настало время сделать серверную часть которая будет принимать запросы выполнять необходимые действия и отправлять ответ в клиентскую часть приложения.

Итак назовем файл action.php и впоследствии будем к нему обращаться из index.php

Создаем соединение с базой данных

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

Обрабатываем нажатие кнопки обновить информацию следующим кодом