jquery send form ajax

Как отправить данные с формы без перезагрузки страницы, да легко с помощью ajax.

Создадим простенькую форму:

Далее нам понадобится подключить jQuery

И делаем непосредственно наш Javascript

Ну и непосредственно (res.php) файл который будет принимать наши

данные и возвращать нам ответ:

Добавим на нашу страницу блок с атрибутом «results» куда будем выводить результат:

url (строка). Страница сервера, к которой будет сделан запрос.
type (строка: GET или POST). Тип запроса к серверу: GET или POS
data (строка). Данные, отправляемые на сервер.
cache (true или false). Включает или выключает кеширование браузером.
async (true или false). По умолчанию true. Включает или выключает асинхронные запросы

success вызывается, когда запрос завершился успешно. Ему передаются параметры: возвращаемые сервером данные, строка, содержащая код ответа сервера
error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки
complete вызывается, когда запрос завершился. Просто завершился, независимо от того, удачей или нет

Расскажу о форме отправки писем с валидацией и отправкой данных на Ajax. В конечном итоге нам нужно получить форму с проверкой на правильность вводимых данных «на лету» и отправкой данных без перезагрузки страницы.

Вот скриншот формы:

jquery send form ajax

А вот скриншот той же формы, но с ошибками ввода:

jquery send form ajax

Ссылка на скачивание и тестирование — внизу.

Забегая вперед, скажу, что в итоге вышло 7 файлов:

  1. jquery1.10.min.js
  2. jquery.form.validation.js
  3. site.js
  4. send.php
  5. style.css
  6. corner.gif
  7. index.php
  8. Начнем.

jquery1.10.min.js — мы подключаем библиотеку jQuery последней версии;

jquery.form.validation.js — «почти jQuery плагин» от Романа Янке;

site.js — тут я объединил все мною написанные скрипты, которые здесь использованы;

send.php — скрипт отправки данных из формы на почту;

style.css — стили для ошибок ввода;

Читайте также:  asus p5b plus bios

corner.gif — уголок для оформления сообщения об ошибке валидации;

index.php — наш главный файл в котором расположена форма и объединены скрипты со стилями.

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

При отправки формы мы перехватываем стандартное действие атрибута action и вызываем нашу функцию ajax();. Для работы нашей валидации каждому инпуту и полю ввода задаем отдельные классы или идентификаторы. А для серверного скрипта — пишем name.

Вводим новую переменную msg, собираем в ней все полученные данные с полей формы функцией serialize(), у тега form у нас стоит >
Далее, создадим функцию:

Например, если на странице не существует блок с , то создадим его:

Инициализируем «почти плагин» и вешаем его на кнопку отправить, мы задали у нее :

Далее вешаем функцию validate(); на КАЖДОЕ поле нашей формы — задаем полям либо классы либо идентификаторы, кому как нужно. В параметр test мы можем передать следующие значения:

  • blank Поле должно быть заполнено
  • email Поле должно быть заполнено + это должен быть валидный емэйл
  • maxlength# Устанваливает максимальное количество символов в поле — #
  • minlength# Устанавливает минимальное количество символов в поле — #
  • lengthrange#-# Устанавливает диапазон длины значение от # до # символов
  • digits Принимает только цифтры
  • letters Принимает только буквы
  • Рег выражение Можно задать любое регулярное выражение для проверки поля
  • Функции Можно задать любую функцию для проверки, которая вернет true/false
  • Объекты jQuery Укажите любое поле, чтобы проверить текущее значение поля со значением указанного.

Так же можно комбинировать данные значения.

Есть два необязательных параметра: valid — если всё ок и invalid — если не ок

Далее — функции, которые я написал.

Первая функция

Если после инпута с классом .name нет элементов с классом .error, то добавляем после инпута блок с этим классом и сообщением об ошибке внутри и через 2 секунды скрываем его от посторонних глаз с помощью функции fadeOut(); далее, через паузу в 2.6 секунд, мы удаляем этот блок из дерева DOM. Почему именно 2.6 секунд? У нас блок исчезает через 2 секнды с помощью fadeOut(«slow»); а slow длится 0.6 секунд. Вот и получается 2.6. Кстати, все значения здесь в миллисекундах.

Читайте также:  exception in thread main java lang unsupportedclassversionerror
Вторая функция

Пользователь все правильно ввел, сообщение об ошибке нужно убрать из дерева DOM.

Можно написать очень много таких функций для полей любого типа. Идем дальше. Скрипт отправки данных на почту:

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

Если нет ошибок, то присваиваем полученным переменным нормальные имена, составляем сообщение и отправляем его. В противном случае выводим сообщения об ошибках.

Здесь ничего объяснять не буду — все и так понятно.

Может быть, моя статья кому-нибудь понравится.

Протестировать можно здесь: jsfiddle.net/mCNF4/8

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Всем привет друзья, вот есть такая форма. Что не делаю не работает, просто не отправляет письмо.. в чем проблема?

  • Вопрос задан более трёх лет назад
  • 12644 просмотра

jquery send form ajax

jquery send form ajax

Как минимум синтаксическая ошибка —

1. Без Аякса форма работает?
Если нет, дело в пхп файле,
2. Сервер позволяет отправлять письма?
3. Сервер позволяет отправлять письма с произвольных емейлов?
Если да, да, да, то как вы проверяете, что письмо отправлено/не отправлено, кроме флага success в аякс запросе?

Оцените статью
Все о Windows 10
Добавить комментарий