отправка формы ajax serialize
Получение данных формы на jQuery
Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.
jQuery – Получения данных формы с помощью метода each
Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.
В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов ( name и value ) элементов.
При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.
Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.
Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.
PHP код, обрабатывающий ajax запрос на сервере:
Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).
Сериализация формы с помощью методов jQuery serialize и serializeArray 
Serializing and submitting a form with jQuery and PHP
I’m trying to send a form’s data using jQuery. However, data does not reach the server. Can you please tell me what I’m doing wrong?
JavaScript (in the same file as the above form):
Server side PHP (/getcontact.php):
Can you please tell me what I am doing wrong?
UPDATE
Checked var_dump($_POST) and it returned an empty array.
The weird thing is that the same code tested on my local machine works fine. If I upload the files on my hosting space it stops working. I tried doing an old-fashioned form without using jQuery and all data was correct.
I don’t see how this would be a server configuration problem. Any ideas?
8 Answers 8
You can use this function
return type is json
EDIT: I use event.preventDefault to prevent the browser getting submitted in such scenarios.
Adding more data to the answer.
dataType: «jsonp» if it is a cross-domain call.
beforeSend: // this is a pre-request call back function
complete: // a function to be called after the request ends.so code that has to be executed regardless of success or error can go here
async: // by default, all requests are sent asynchronously
cache: // by default true. If set to false, it will force requested pages not to be cached by the browser.
Форма с валидацией и отправкой на Ajax
Расскажу о форме отправки писем с валидацией и отправкой данных на Ajax. В конечном итоге нам нужно получить форму с проверкой на правильность вводимых данных «на лету» и отправкой данных без перезагрузки страницы.
Вот скриншот формы:
А вот скриншот той же формы, но с ошибками ввода:
Ссылка на скачивание и тестирование — внизу.
jquery.form.validation.js — «почти jQuery плагин» от Романа Янке;
site.js — тут я объединил все мною написанные скрипты, которые здесь использованы;
send.php — скрипт отправки данных из формы на почту;
style.css — стили для ошибок ввода;
corner.gif — уголок для оформления сообщения об ошибке валидации;
index.php — наш главный файл в котором расположена форма и объединены скрипты со стилями.
Сначала я покажу содержимое файлов, а затем все объясню.
При отправки формы мы перехватываем стандартное действие атрибута action и вызываем нашу функцию ajax();. Для работы нашей валидации каждому инпуту и полю ввода задаем отдельные классы или идентификаторы. А для серверного скрипта — пишем name.
Вводим новую переменную msg, собираем в ней все полученные данные с полей формы функцией serialize(), у тега form у нас стоит id=«form», далее используем метод jQuery.ajax, соответственно метод отправки POST, url — путь к PHP скрипту, data — тут данные, которые нужно отправить на сервер, в нашем случае это данные с формы. В случае успешного результата (success), выводим в блок #results данные, которые поступили с сервера, например, отчет об отправке. А если произошла ошибка (error), то соответственно выводим сообщение об ошибке.
Далее, создадим функцию:
Инициализируем «почти плагин» и вешаем его на кнопку отправить, мы задали у нее class=»send» :
Есть два необязательных параметра: valid — если всё ок и invalid — если не ок
Далее — функции, которые я написал.
Первая функция
Вторая функция
Пользователь все правильно ввел, сообщение об ошибке нужно убрать из дерева DOM.
Можно написать очень много таких функций для полей любого типа. Идем дальше. Скрипт отправки данных на почту:
Здесь, думаю, все понятно. Сначала проверяем на заполненность и существование данных из формы, обязательно нужно делать проверку на сервере.
Если нет ошибок, то присваиваем полученным переменным нормальные имена, составляем сообщение и отправляем его. В противном случае выводим сообщения об ошибках.
Здесь ничего объяснять не буду — все и так понятно.
Может быть, моя статья кому-нибудь понравится.
Ajax-запрос к серверу через jQuery
В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.
Запрос html-данных с помощью функции Load
Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):
Более продвинутый вариант использования load:
В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.
Ajax-запросы функциями GET и POST
Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.
Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.
Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.
На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.
Получение json-данных с помощью getJSON
На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:
Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.
Простой ajax-запрос через jQuery с помощью функции AJAX
Теперь приведу пример простого get запроса функцией ajax и получением html-данных.
Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.
Более сложный пример ajax-запроса через jQuery
Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.
Кнопка отправки данных:
В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.
Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:
Ниже приведу еще несколько примеров использования ajax-запросов.
Отправка формы со всеми данными ajax-запросом через jQuery
Примерный код html-формы:
Отправка изображения или файла ajax-запросом через jQuery
Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.
html-код будет такой:
Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.
Теперь javascript код отправки файла на сервер с отображением прогресса:
При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.
Пример серверной части на php (по просьбе Евгения):
Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.
Отправка произвольной формы на AJAX без перезагрузки страницы
Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.
Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.
Что можно отправлять через AJAX
Многие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.
На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.
Общая схема работы
Почти всегда это происходит так:
Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.
Начальный код
Вначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.
Теперь создадим простую форму и блок ответа.
Первые особенности
В первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action. Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id, по которому и сможем идентифицировать форму.
Кнопка имеет тип submit. На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.
Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:
Дальше в js-коде нужно будет перехватывать не submit (формы), а click (кнопки).
Блок #my_message служит для вывода ответа.
Если используется форма, то лучше всё-таки использовать именно submit, поскольку отправка формы может происходить и без нажатия на кнопку: Enter на любом текстовом input-поле. Это типовое поведение браузеров.
Первый вариант (submit)
При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:
Функции для AJAX
То есть указывается тип запроса (method), адрес обработчика (url), данные (data, обычно в JSON-формате), а также функции, которые реагируют на ответ (в этом примере done).
Привожу полный код, чтобы вы не запутались:
Обработчик размещаем в файле post.php в таком виде:
То есть он пока ничего не делает, а просто выдаёт текст.
Здесь важный момент: адрес обработчика указывается так, чтобы он был доступен по http-адресу. Грубо говоря, адрес можно вбить в браузер. Это особенно актуально, когда используется сложная структура страниц или js-файл выносится в отдельный каталог. В некоторых случаях оптимальным будет указать полный http-адрес к php-файлу, например http://сайт/post.php. Перед тем, как работать с аякс-запросом, убедитесь в корректности адреса обработчика, иначе запрос уйдёт «в никуда», а вы будете гадать, почему он не работает. 🙂
Ответ от сервера мы получаем в виде простого текста, поэтому мы его просто выводим в блоке #my_message как есть.
Второй вариант (button)
Теперь рассмотрим второй вариант — отправку данных с помощью произвольного элемента по клику.
Как видите, принципиально здесь ничего не поменялось, кроме того, что мы отслеживаем click на кнопке #my_form_send (которая не обязательно может быть кнопкой, а например блоком span).
Какой вариант использовать, зависит от задач вёрстки. В некоторых случаях кнопку отправки нужно вынести за пределы формы и в этом случае придется использовать click-вариант.
PHP-обработчик
Давайте немного изменим обработчик, чтобы он выдавал какую-то отладочную информацию, например входящий post-запрос.
Здесь без труда угадываются поля форм.
Произвольные данные для отправки
Отправка данных происходит в специальном (серилизованном) формате. Функция jQuery serialize() собственно и приводит данные формы к этому формату, а на стороне сервера, PHP сам сформирует обычный массив. Всё это происходит в фоновом режиме, поэтому дополнительные преобразования не нужны.
Рассмотрим вариант, когда нужно отправить не форму, а какие-то произвольные данные, наример массив данных.
Если вместо фрагмента
то php-обработчик покажет пустой массив. То есть данные не прошли. Для того, чтобы данные были получены их следует оформить:
Более удобным (и распростанённым) будет второй вариант который представляет собой привычный js-объект/массив:
Таким нехитрым способом можно отправлять любые данные на сервер, при том, что от формы можно вообще отказаться. Приведу пример, где все поля ввода могут быть расположены произвольно, при том, что отправка происходит по клику на ссылке:
Приём сложных данных от сервера
Теперь рассмотрим случай, когда сервер должен вернуть не просто текст, а какие-то данные, например массив.
Для этого в php-скрипте следует отдавать специально преобразованный в JSON-формат php-массив. К счастью разработчики PHP всё уже предусмотрели. 🙂
Пусть у нас обработчик будет post-json.php :
Обработка входящих данных на сервере
Теперь рассмотрим вопросы приёма данных на сервере. Поскольку обработчик доступен прямо из браузера, то его следует как-нибудь защитить от прямого вызова. Полноценно сделать это можно в рамках CMS или php-фреймворка, вроде LPF, поэтому я покажу лишь минимальные приёмы.
В первую очередь следует заблокировать работу скрипта, если нет входящих POST-данных. В начале php добавьте такой код:
Теперь при прямом вызове этого скрипта, будет выдаваться сообщение и работа скрипта будет прекращена.
Во вторую очередь следует проверять все входящие данные из формы и по возможности их так обрабатывать, чтобы исключить возможные проблемы безопасности. Сама форма должна использовать HTML-атрибуты для полей, чтобы обеспечить первоначальную валидацию данных. Например, если поле предназначено для электропочты, то следует указать тип email — браузер не позволит выполнить отправку неверных данных.
В некоторых случаях желательно использовать различные jQuery-плагины, который позволяют отформатировать ввод данных. Например ввод телефона в виде групп цифр. Я затрагиваю эти вопросы, поскольку он достаточно важны, но в своих примерах я их опускаю, чтобы не загромождать код. 🙂
Отправка email-почты
Это достаточно типовая задача, которая решается через submit-отправку. Пусть будет простая форма из двух полей.
Обработчик у нас в post-email.php. На входе ($_POST) получаются такие данные:
Аналогично можно поступить и с другими полями формы. Поскольку они являются обязательными, то форма всегда должна их содержать.
Дальше вынесем входящие данные в отдельные переменные:
С помощью trim() удаляем возможные крайние пробелы, а strip_tags() удаляет все html/php-тэги.
Дальше следует проверить входящие данные. В первую очередь верность email-адреса. Вполне возможна ситуация, когда посетитель использовал старую версию браузера, которая не понимает нужный тип поля ввода. Если адрес ошибочный, то следует выдать предупреждение и выйти из php-обработчика.
Аналогично поступаем с именем, если оно оказалось пустым.
Вот теперь все проверки пройдены и можно выполнить непосредственную отправку почты. Я приведу полный код post-email.php:
Вы можете использовать данный пример как заготовку для своих задач.