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

Всем привет, при разработке веб приложений происходит взаимодействие клиентской части и серверной например в работе с базой данных необходимо добавлять, редактировать или удалять записи. Зачастую все проходит по отлаженной схеме в виде 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 как он работает можете почитать описание на сайте.
Следующий код записывает переданную информацию в базу данных

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

На этом уроке мы научимся отправлять форму без перезагрузки страницы , используя метод 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 c переменными получателя, темы сообщения и самим сообщением.

Как только пользователь заполнит форму и нажмёт на кнопку, заказчик / администратор получит на свой емайл данные из формы о заявке, оставленной пользователем. Так это и работает.

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. Внутри тега

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

Категория не выбрана Легковые Грузовые Cпец.техника

AJAX работает с HTML элементами через атрибут id, поэтому не забываем прописать его нашей форме.

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

Отправить

При нажатии на кнопку будет запускаться функция, прописываем ее название в атрибуте onclick. Задаем id для блока.

Ну и теперь перейдем к самому интересному - созданию функции.

Дадим ей название send. С помощью функции serialize преобразуем набор элементов с нашей формы в строку, пригодную для передачи в обработчик. В url пропишем путь к обработчику, который создадим позже. Передадим в data данные из msg. Происходит запрос в обработчик.

Теперь нужно создать обработчик. Имя ему мы уже задали - auto_result.php. Добавим в него следующий код:

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

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

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

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