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

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

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

Screenshot_002

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

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

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

Screenshot_11

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

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

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

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

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

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

Screenshot_2

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

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

Удаление данных из базы происходит так:

Screenshot_5

 

В браузере мы видим alert(data) где в переменной data содержится код echo ‘Данные удалены’ которые мы отправили в клиентскую часть из серверной action.phpScreenshot_6

 

На этом пожалуй все, исходники кода прилагаю

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

Оставить комментарий


Примечание - Вы можете использовать эти HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>