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

ASP.NET Web Forms и Ajax 4

Twitter LinkedIn Facebook Адрес электронной почты

• Статья
• 09/21/2022

Следующие файлы размещаются в сети CDN:

• https://ajax. aspnetcdn.com/ajax/4.0/1/Date.HijriCalendar.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/Date.HijriCalendar.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/Date.UmAlQuraCalendar.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/Date.UmAlQuraCalendar.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/DetailsView.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/Focus.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/GridView.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/Menu.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MenuStandards.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxApplicationServices.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxApplicationServices.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxComponentModel.debug.js
• https://ajax.aspnetcdn.com/ajax/4. 0/1/MicrosoftAjaxComponentModel.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxCore.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxCore.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxGlobalization.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxGlobalization.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxHistory.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxHistory.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxNetwork.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxNetwork.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxSerialization.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxSerialization.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxTimer.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxTimer.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxWebForms. debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxWebForms.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxWebServices.debug.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjaxWebServices.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/SmartNav.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/TreeView.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/WebForms.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/WebParts.js
• https://ajax.aspnetcdn.com/ajax/4.0/1/WebUIValidation.js

Примечание. Скрипты глобализации, такие как fr-FR.js, можно найти в следующей папке:

• https://ajax.aspnetcdn.com/ajax/4.0/1/globalization/

Урок 26. Создание AJAX формы отправки сообщений MODX

Для создания AJAX формы нам понадобится:

• modSwiftMailer — дополнение MODX Revolution, которое можно установить из репозитория
• библиотека jQuery

Алгоритм работы:

1. пользователь заполняет поля и нажимает «Отправить»
2. форма обращается по адресу к ресурсу, где лежит сниппет sendMail
3. этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender

Создание формы отправки сообщения

Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):

В моём случае эти поля:

• Имя
• Email
• Телефон
• Сообщение

Напротив полей, обязательных для заполнения, выставим атрибут required=»required», чтобы форма не отправлялась, пока не будут заполнены данные поля.

Создание скрипта обработки формы

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

Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 — это ИД ресурса, где содержиться наш обработчик AJAX вызова.

Создание обработчика AJAX запроса

Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:

Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле «Содержимое» новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.

Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа.

Все вопросы по работе modSwiftMailer можете задать в этой ветке форума

Полный код шаблона, который используется в демо, можно просмотреть по этой ссылке

Источники, которые помогли мне в создании урока и дополнительные материалы для изучения:

• Submit A Form Without Page Refresh using jQuery
• modSwiftMailer
• Урок 25. Создание AJAX поиска на сайте
• Урок 21. AJAX загрузка Quip комментариев
• Урок 9. Создание контакт-формы с помощью FormIt

Форма в Демо не отправляет сообщения А лишь демонстрирует работу скриптов.

Демо AJAX формы

Feb 10 2013 AJAX jquery modSwiftMailer уроки MODx Revolution Виктор Матушевский

Урок 25. Создание AJAX поиска на сайте Урок 28. Работа с csv

Please enable JavaScript to view the comments powered by Disqus.

ajax-form · Темы GitHub · GitHub

Вот 141 публичный репозиторий соответствует этой теме.

..

jquery-форма / форма

Звезда 5,2к

рникол / ajax-форма

Звезда 235

Дмитрий-Синцов / джанго-джиндзя-нокаут

Звезда 138

Кристофер / searchwp-live-ajax-поиск

Звезда 108

Мьебрахими / AspNetCore.Ненавязчивый.Ajax

Звезда 50

Дивьяншусаху / миниCTF

Звезда 46

Андрей88 / mvc-электронная коммерция

Звезда 44

КираЛТ / Бьякс

Звезда 40

мрккрп / форма

Звезда 35

веб-разработчики-ЕС / z-шаблон

Звезда 29

Колапоски / Заметки

Звезда 28

кевиндб / jquery-загрузка-json

Звезда 27

демогорн / yii2-ajax-кнопка отправки

Звезда 26

джуанг / джанго-галереяфилд

Звезда 23

Гоутаманд / codeigniter-add-edit-delete-view-login-register

Звезда 22

фреганте / пуш-форма

Спонсор Звезда 17

Ричарддж / contao-ajax_reload_element

Спонсор Звезда 15

manishjoy / клиент-ajax-логин

Звезда 15

зумэ2020 / php-ajax-форма-представление

Звезда 15

Максмаг / ajax-корзина-страница

Звезда 14

Улучшить эту страницу

Добавьте описание, изображение и ссылки на ajax-форма страницу темы, чтобы разработчикам было легче узнать о ней.

Курировать эту тему

Добавьте эту тему в свой репозиторий

Чтобы связать ваш репозиторий с ajax-форма тему, перейдите на целевую страницу репозитория и выберите «управление темами».

Узнать больше

Форма AJAX

 {
 "Name": "ДЕМО-пример AJAX",
 "Псевдоним": "demo_ajax_example",
 "IsSubscription": ложь,
 "Поля": [
 {
 "Имя": "Электронная почта",
 "Псевдоним": "Электронная почта",
 "CreatedDateTime": "2021-06-28T18:03:40.451603",
 "UpdateDateTime": "0001-01-01T00:00:00",
 «Тип»: 7,
 «Обязательный»: правда,
 «ТипПолевойГруппы»: 1,
 "Заказ": 2,
 "Параметры": [],
 "Идентификатор": "1396",
 "Идентификатор формы": "1383"
 },
 {
 "Имя": "reCAPTCHA v2",
 "Псевдоним": "ReCAPTCHAV2",
 "CreatedDateTime": "2021-06-28T18:03:40. 45161",
 "UpdateDateTime": "0001-01-01T00:00:00",
 «Тип»: 9,
 «Обязательный»: правда,
 «ТипПолевойГруппы»: 2,
 "Заказ": 4,
 "Параметры": [],
 «Идентификатор»: «1404»,
 "Идентификатор формы": "1383"
 },
 {
 "Имя": "Имя",
 "Псевдоним": "Имя",
 "CreatedDateTime": "2021-06-28T18:03:40.451602",
 "UpdateDateTime": "2022-05-11T15:32:06.413082",
 «Тип»: 7,
 "Обязательный": ложь,
 «ТипПолевойГруппы»: 1,
 "Заказ": 0,
 "Параметры": [],
 "Идентификатор": "1394",
 "Идентификатор формы": "1383"
 },
 {
 "Имя Фамилия",
 "Псевдоним": "Фамилия",
 "CreatedDateTime": "2021-06-28T18:03:40.451602",
 "UpdateDateTime": "2022-05-11T15:32:06.413082",
 «Тип»: 7,
 "Обязательный": ложь,
 «ТипПолевойГруппы»: 1,
 "Заказ": 1,
 "Параметры": [],
 «Идентификатор»: «1395»,
 "Идентификатор формы": "1383"
 },
 {
 "Имя": "Не требуется",
 "Псевдоним": "Не требуется",
 "CreatedDateTime": "2021-06-28T18:03:40. 451604",
 "UpdateDateTime": "2022-05-11T15:32:06.413082",
 «Тип»: 7,
 "Обязательный": ложь,
 «ТипПолевойГруппы»: 2,
 "Заказ": 3,
 "Параметры": [],
 "Идентификатор": "1397",
 "Идентификатор формы": "1383"
 }
 ],
 «Сумма платежа»: 0.0,
 «ИдентификаторМодуляЭлемента»: 0,
 "ТипФормы": "Универсальный",
 "ИмяМодуля": "",
 "Уникальный идентификатор": "9fa95b41-db80-48d6-8d44-ba2491782889",
 "Родитель": {
 "Ценить": {
 «Идентификатор»: 2227,
 "ModuleLayoutName": "Сведения о странице",
 «Включено»: правда,
 "Дата выпуска": "2018-11-24T18:00:00",
 "ExpiryDate": "2099-12-10T18:00:00",
 «Взвешивание»: 0,
 "Item_Rating": 0,
 «Редактор кода»: правда,
 "ВнешнийИд": 0,
 «Отключить для поиска по сайту»: ложь,
 "Имя_Автора": ноль,
 «Автор_урл»: ноль,
 "Автор": 0,
 "SEOTitle": ноль,
 "Пользовательские свойства": "{}",
 "LastUpdatedDate": "2021-07-13T01:06:04. 346349",
 "Module_Alias": "Страница",
 "Module_Id": 1522,
 "ParentName": "демо-CS",
 "ParentUrl": "/demo-cs",
 "Имя": "Форма AJAX",
 "UrlSlug": "ajax-форма",
 "Ссылка": "/demo-cs/ajax-form",
 «Метаописание»: ноль,
 "ShowPageForSearchEngine": правда,
 «Каноническая ссылка»: ноль,
 «Метазаголовок»: ноль,
 «Родительский идентификатор»: 2224,
 "Список_адресов": [
 "/демо-CS/ajax-форма"
 ],
 "Родительский_Список": [
 2224
 ],
 «ВключитьAMP»: ложь,
 "AMPContent": ноль,
 «Социальные метатеги»: ноль,
 "OpenGraphPropertiesValue": ноль,
 «SeoPriority»: 0,5,
 "Description": "{% тип компонента: \"form\", псевдоним: \"demo_ajax_example\", макет: \"\", collectionVariable: \"formData\" %}\r\n{% форма захвата %} {% тип компонента: \"form\", псевдоним: \"demo_ajax_example\" %}{% endcapture %}\r\n\r\n
Базовая демонстрация отправки форм AJAX
 \r\n< div class=\"grid-x grid-padding-x\">\r\n
\r\n
{{form}}
\ r\n
\r\n
\r\n
 \r\n
Код формы
\ r\n
Жидкий вывод
\r\ n
\r\n
\r\n
\r\n
ПРИМЕЧАНИЕ.
No related posts.