Отправка данных из формы в php ajax: Отправка произвольной формы на AJAX без перезагрузки страницы

Содержание

Как отправить форму без перезагрузки страницы (AJAX)

Что такое AJAX

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, задан и 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 формы, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

Если есть вопросы, относительно этой статьи, оставляйте свои комментарии и мы попробуем помочь разобраться, если что-то не заработает.

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

Опубликовал(а): Bumos в: 19 декабря 2017 Оставить комментарий23 комментария Перейти к комментариям

Всем привет, при разработке веб приложений происходит взаимодействие клиентской части и серверной например в работе с базой данных необходимо добавлять, редактировать или удалять записи. Зачастую все проходит по отлаженной схеме в виде GET или POST запросов. Однако есть небольшие неудобства – среди которых можно выделить основное, при отправке данных PHP скрипт возвращает ответ от сервера и это происходит на другой странице, а если это массовый ввод данных – то становится неудобно вводить данные, отсылать их в базу, получать ответ на новой странице, а затем возвращаться на страницу ввода.

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

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

Также определим некоторые стили:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сбор данных форм — Ajax с PHP: добавление динамического содержимого на веб-сайты Видеоруководство

Из курса: Ajax с PHP: добавление динамического контента на веб-сайты

Собрать данные формы

“

— [Рассказчик] Есть несколько способов собрать данные формы, которые мы хотим отправить в нашем Ajax-запросе.

И у каждого есть свои плюсы и минусы, которые мы могли бы выбрать. Во-первых, мы могли бы просто использовать JavaScript, чтобы найти нужные нам атрибуты по одному. Мы идем и находим их, мы получаем их значение, мы объединяем его в строку. Это, безусловно, очень надежный способ сделать это, и это хороший способ сделать это с небольшими формами, но он становится очень утомительным, если нам приходится работать с большим количеством атрибутов. Правильно, нам придется возвращаться снова и снова. Так что лучше было бы попытаться написать немного кода, который мы могли бы использовать повторно. Фрагмент кода, который мы могли бы просто сказать: «иди, получи все атрибуты формы» и верни мне все эти атрибуты «собранными и готовыми к работе», чтобы мы могли передать их нашему Ajax-запросу. Таким образом, мы могли бы попытаться написать какой-нибудь собственный код, который бы перебирал форму, искал все ее элементы и собирал все эти атрибуты с их значениями, чтобы мы могли их отправить. Это совершенно правильный путь.

Есть и другая возможность, которая заключается в том, что, поскольку это общая потребность, существует множество сторонних библиотек, которые выполняют эту задачу за нас. Вы, безусловно, можете поискать в Интернете возможность сериализации формы. Это термин, который используется для сбора всех этих атрибутов. И jQuery фактически включает сериализацию в библиотеку jQuery. Так что, если вы используете jQuery, это уже встроено для вас. И, наконец, четвертая возможность, что есть специальный класс под названием FormData. И это класс, который был добавлен в Ajax или в спецификацию запроса HTMLHttp в качестве раунда 2. Для краткости мы называем его XHR2. И это как бы пошло вместе с HTML5. Таким образом, браузеры, поддерживающие HTML5 и XHR2, будут иметь доступный класс данных формы. И это очень упрощает процесс. Мы увидим, как это работает через мгновение. Большинство современных браузеров поддерживают FormData. Он был добавлен более пяти лет назад. Однако он не работает с Internet Explorer 8 или Internet Explorer 9.

. Так что, если вам все еще нужна поддержка старых браузеров, то это не вариант для вас. Вам придется один из других вариантов. Так что этот вариант работает только в том случае, если нам не нужна поддержка IE9 или более ранней версии. Если мы действительно сосредоточены только на современных браузерах, мы можем использовать класс FormData. Рассмотрим варианты номер два и номер четыре более подробно. Итак, чтобы собрать здесь данные формы, я собираюсь иметь var form_data, равное я собираюсь написать пользовательскую функцию с именем collectFormData. Идея состоит в том, что он будет принимать форму в качестве аргумента, а затем будет проходить по этой форме в поисках всех тех входных данных, которые у нас есть. Итак, здесь, наверху, calculateMeasurements, я просто вставлю функцию, которую мы потом сможем посмотреть. GatherFormData, мы передаем форму, она принимает форму, получает элементы по имени их тега, ищет входные данные. Затем он берет все эти входные данные и перебирает их по одному, используя цикл for.

И для каждого он берет имя, значение и ставит между ними знак равенства. И он помещает их все в массив, я только что назвал его массивом, и после того, как он помещает их все в массив, в конце мы соединяем массив вместе, используя амперсанд. И это то, что мы возвращаем. Это дало бы нам именно ту строку, которую мы ищем. Давайте попробуем. Давайте сохраним нашу страницу и откроем нашу страницу, ajax_form, это то, на что мы хотим перейти. Вот как выглядит наша форма. У нас есть длина, ширина и высота. У меня есть кнопка отправки HTML и кнопка отправки Ajax. Итак, давайте нажмем 2 раза 2 раза 2. Таким образом, объем 2 раза 2 раза 2 должен быть 8. Это то, что я ожидаю получить обратно. Итак, я собираюсь щелкнуть Ajax submit, здесь мы получаем общий объем 8. И консоль сообщает мне, что результат, который вернулся, также был 8. Так что это правильно. Давайте попробуем другой. Давайте попробуем 3, а давайте попробуем 4 и 5. И мы получим обратно 60. Это общий объем. Так что это работает, и это совершенно правильный подход.

Но обратите внимание, что у меня здесь есть комментарий, в котором упоминается, что это работает только с полями ввода. В нем отсутствуют текстовые поля, параметры выбора, флажки и переключатели. Он ищет только этот тип тега, а в нашей форме может быть много разных вещей. Теперь мы можем написать более продвинутую версию этого. Они наверняка есть в Интернете. Вы можете просмотреть их или написать свой собственный. И мы могли бы пройти и поискать другие типы вещей. Вместо того, чтобы искать по TagName, мы могли бы пройтись по всем элементам формы и перебрать их в цикле, и таким образом сложить все значения. И это сработает. Но в этот момент вам может быть лучше взглянуть на некоторые сторонние библиотеки. Вещи, в которых уже заложена вся эта сложность. Вместо этого я пока оставлю сбор данных здесь, но сейчас я спущусь сюда, и мы попробуем другой подход, о котором мы говорили ранее. И это класс FormData. Как мы его используем, мы просто вызываем new FormData. Это новый объект JavaScript, точно так же, как мы назвали новый XMLHttpRequest.

Мы вызываем новые данные формы, передаем нашу форму и угадываем, что она делает. Он проходит и проходит через все элементы, собирает все эти различные элементы, готовит их для отправки. Прежде чем мы попробуем это, я просто хочу добавить сюда дополнительный фрагмент кода, который просто будет перебирать записи FormData. И для каждого он просто запишет свой ключ и его значение. Итак, мы можем увидеть, как они выглядят. Так что давайте сохраним это. Мы больше не вызываем нашу функцию collectFormData, вместо этого мы собираемся создать новый объект FormData и передать его в нашу форму, чтобы он мог сделать все это за нас. Сохраним нашу страницу. Давайте перезагрузим страницу, чтобы получить новый JavaScript. А давайте попробуем 2, 2 и 2. Ajax submit. Хорошо, мы получили длину 2, ширину 2 и высоту 2. Видите эти значения, эти записи? Но подождите минутку, наш общий объем равен нулю. Что здесь случилось? Так вот, с FormData нужно быть очень осторожным. Это то, что FormData — это довольно продвинутый способ работы с данными формы.

И это также позволяет нам прикреплять файлы. Это то, что немного сложнее сделать. Потому что мы не можем использовать x-www-form, закодированную как тип контента, когда у нас есть файлы. Итак, всякий раз, когда мы собираем наши собственные атрибуты, мы хотим установить для заголовка запроса значение form-url-encoded. Но если мы используем FormData, мы хотим прокомментировать это. Не устанавливайте тип содержимого с помощью FormData, хорошо. Он установит все так, как ему нужно. Так что просто оставьте это и давайте вернемся и попробуем еще раз. Мы перезагрузим страницу. Давайте попробуем 2, 2 и 2. Отправка Ajax, объем теперь равен 8. Теперь он смог правильно закодировать эти значения и отправить PHP. Так что PHP может работать с ними. Так что, безусловно, самый простой способ работать с FormData — с этим объектом FormData. К сожалению, он не поддерживается IE9.или ранее. В этом случае вы либо захотите написать свой собственный код, либо поискать сторонние библиотеки, которые могут сделать это за вас.

Содержание

Скрипты Ajax и PHP

Популярность Ajax растет день ото дня. Одним из лучших примеров, используемых Google, является предложение Google. Здесь на основе ключевых слов пользователя, введенных в поле поиска, Google возвращает совпадающие ключевые слова или расширение этих слов, которые ранее искали пользователи.

Ajax — короткая форма асинхронного JavaScript и XML, которую мы попытаемся изучить, изучив несколько примеров здесь. Как вы знаете, Ajax сам по себе не является языком сценариев, поэтому мы будем использовать наш сценарий PHP для программирования здесь и другие языки в других разделах.

Подключение к файлу JavaScript

Мы можем сохранить наш файл JavaScript, используемый для Ajax, внутри основного файла или во внешнем файле .js. Любой внешний файл JavaScript может быть включен в основной файл следующим образом.

Проверка поддержки сценария

Поскольку Ajax зависит от сценариев на стороне клиента, нам нужно проверить, включена ли поддержка сценариев (в браузере) или нет.

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

Давайте начнем с нескольких примеров использования Ajax. Для работы в Ajax нам нужно создать объекты запроса XMLHttp в зависимости от типа браузера. Этот объект мы будем использовать для передачи данных и сбора данных с сервера. Используя метод GET, мы можем отправить данные формы в серверный PHP-скрипт, используя Ajax. Отображает часы, показывающие время сервера, когда запрос отправляется каждую секунду на сервер для получения данных Список данных можно использовать для автозаполнения текстового поля. Мы узнаем, как добавлять параметры в список данных. Мы будем использовать Ajax для отправки значения выбора первого раскрывающегося списка, а затем на основе этого значения мы отправим еще один зависимый раскрывающийся список.Подробнее Мы будем использовать Ajax для передачи данных электронной почты, введенных пользователем, а затем этот адрес проверяется с помощью кода проверки, написанного на PHP.

Читать далее Используя Ajax, мы можем отправить идентификатор клиента на сервер и собрать соответствующие данные клиента. . Читать далее Мы можем создать скрипт подкачки, разбив записи на страницы, используя базу данных Ajax, PHP и MySQL. . Читать далее Нам нужно общаться с посетителями во время обработки данных на сервере. Изучите основы отображения и скрытия сообщений с помощью слоев по тегу DIV. Статус выполнения скрипта может быть показан растущим индикатором выполнения. Это основа того, как отображать растущий индикатор выполнения. Данные берутся из таблицы MySQL, а статус обновляется из основного скрипта. Мы можем отображать сообщения об ошибках без перезагрузки страницы или отправки всех данных в скрипт на стороне сервера с помощью PHP и Ajax. При заполнении данных мы можем проверить форму, отправив данные в скрипт на стороне сервера с помощью Ajax и PHP. Что такое Джсон? Как узнать, доступна ли поддержка Json в нашем PHP или нет? Что мы можем сделать с нашими функциями Json? .

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

90 024 ListBox

Демонстрационная ссылка	Описание
Метод GET	Данные формы отправляются и возвращаются после обработки методом GET
При выборе окна списка отображаются детали этой записи
Связанные записи	При выборе одного параметра списка будут отображаться все связанные с ним записи
Листание записей	С кнопками «Назад» и «Вперед» и отображением 10 записей на странице
Поиск по ключевому слову	Отображение соответствующего результата поиска по мере ввода символов
Проверка формы	Проверка всех входных данных, введенных пользователем в веб-форму
Проверка формы II	Проверка входных данных, как только фокус смещен в форме
Проверка электронной почты	Проверка адреса электронной почты, введенного пользователем
Метод регистрации и входа	Проверка формы регистрации и отображение сообщений об ошибках без перезагрузки

← Подпишитесь на наш канал YouTube здесь

Эта статья написана командой plus2net. com . https://www.plus2net.com

plus2net.com

▼ Щелкните, чтобы просмотреть дополнительные руководства по Ajax и PHP

sumit	18-02-2009
спасибо

дхирендра	22-04-2009
оставить комментарий

тест	05-07-2009
тестирование форма

камал

24-07-2009

испытания данные.

Отправка данных из формы в php ajax: Отправка произвольной формы на AJAX без перезагрузки страницы

Как отправить форму без перезагрузки страницы (AJAX)

Что такое AJAX

Реализация отправки формы без перезагрузки страницы

Выводы

Читайте также

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

Сбор данных форм — Ajax с PHP: добавление динамического содержимого на веб-сайты Видеоруководство

Собрать данные формы

Содержание

Скрипты Ajax и PHP

Подключение к файлу JavaScript

Проверка поддержки сценария

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

Рубрики

Рубрики