Отправка формы на почту с JavaScript и AJAX

@dz1rt91 · Регистрация: 22.12.2014

Студворк — интернет-сервис помощи студентам

Уважаемые форумчане, подскажите, как отправить данные формы на почту с использованием только НАТИВНОГО JS и AJAX?

@BANO · 09.08.2016, 18:17

dz1rt91, ищите сервисы, которые так делают. AJAX не является SMTP, так что невозможно. Только прослойки или API какой-нибудь, который будет отправлять его за вас.

@dz1rt91 · 09.08.2016, 18:25 **[ТС]**

BANO, Мне дали тестовое задание в котором написано следующее:
"предполагается, что форма поздравления будет отравлять данные полей на сервер по AJAX при помощи GET запроса" как это реализовать?

@BANO · 09.08.2016, 18:30

dz1rt91, как всегда. Это просто отправка формы, никакая это не отправка почты. Сервер будет отправлять почту, как я и говорил.
Вам нужно просто пройтись по форме, и сформировать get строку. Она выглядит примерно так: ?name=var&name1=var1
Вообще это делается совсем нетрудно. Я недавно вот так делал, но там с использованием jquery.
Но генерация строки без неё.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var searchObj = { // получение данных.
    region: +$("#region-filter").val(),
    page: +$("#view .pagination a.active").html(),
    category: +$("#categoryItems").find(".active").attr("data-category")
};
var search = "get&" + Object.keys(searchObj)
    .filter(function (name) {
        return searchObj[name]
    }).map(function (name) {
        return name + "=" + encodeURI(searchObj[name])
    }).join("&");

@dz1rt91 · 09.08.2016, 18:35 **[ТС]**

BANO, первую переменную я понял, мы создаем объект который хранит все данные из формы, так?
а второй объект?

""get&" + " это строка которая будет складывать строку грубо говоря? типа на выходе будет строка такого типа get&var1get&var2 ?
а что за функция фльтр? ты можешь, пожалуйста, разобрать что написано с 6 по 11 строку? очень прошу

@BANO · 09.08.2016, 18:41

dz1rt91,

JavaScript
1
2
3
4
5
6
7
var search = "get&" + // начальная строка, мне нужно было, если значений нету совсем, тебе скорее всего не понадобится, так что можешь убрать
 Object.keys(searchObj) // получаем "имена" полей
    .filter(function (name) { // фильтруем имена
        return searchObj[name] // если значение: пуста строка, 0, undefined, то это поле выкидывается из строки
    }).map(function (name) { // создаём пары
        return name + "=" + encodeURI(searchObj[name]) // формат пары: "<name>=<value>"
    }).join("&"); // соединаяем пары знаком & (nam=val&name=value)

И так, в конце концов получали строку "get&region=1&category=1&page=3". если убрать "get&" +, то строка будет вот такая "region=1&category=1&page=3"

@dz1rt91 · 09.08.2016, 18:45 **[ТС]**

BANO, спасибо! давно занимаешься js?

Добавлено через 2 минуты
BANO, книга Ильи Кантора подходит для изучения js?

@BANO · 09.08.2016, 18:47

dz1rt91, про Илью я слышал. Не знаю как у него с книгами, но сайт он отличный запилил.

@kalabuni · 09.08.2016, 19:36

Сообщение от dz1rt91

подскажите, как отправить данные формы на почту ?

никак.
с использованием только НАТИВНОГО JS и AJAX можно лишь отправить данные формы файлу на сервер
а этот серверный файл из полученных данных может сформировать исходящее почтовое сообщение (если он для этого предназначен и это делать умеет)

@dz1rt91 · 10.08.2016, 11:21 **[ТС]**

kalabuni, как это сделать?

@kalabuni · 10.08.2016, 16:01

Сообщение от dz1rt91

как это сделать?

обратитесь на форум PHP и попросите там написать вам полностью код PHP-файла, который будет получать три пары GET-данных (емейл-адрес="значение", тема письма="значение", текст письма ="значение") и отправку всего этого на указанный емейл-адрес
а потом приходите сюда снова и мы расскажем вам, как с помощью НАТИВНОГО JS и AJAX со страницы отправить этому PHP-файлу три перечисленных выше пары "имя=значение"

@dz1rt91 · 10.08.2016, 16:32 **[ТС]**

kalabuni, допустим у меня есть этот php файл и называется он sendForm.php, что делать дальше?
как обратиться к этому файлу, меня вот это интересует, как js файлом отправить данные которые нужно выслать на email php файлу?

@kalabuni · 10.08.2016, 17:06

предположим, что ваш файл sendForm.php лежит на сервере в той же папке, что и файл отправки, код которого я сейчас здесь выкладываю
и, предположим, что ваш файл sendForm.php, получив данные, просто отправляет письмо, а на страницу отправки вообще ничего не возвращает, никаких сообщений типа "письмо успешно отправлено" или "произошла ошибка отправки письма, попробуйте отправить позже ещё раз"

тогда код файла отправки может быть таким:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    var XHR = new XMLHTTPRequest ()
function sendMail (f)
    {
var str = [] 
    for (var el = f.elements, j = 0; j < el.length - 1; j++)
        {
        str [j] = el[j]. name + '=' + encodeURIComponent (el[j].value);
        }
    XHR.open ('get', 'sendForm.php?' + str.join ('&'), true);
    XHR.send (null);
    }
</script>
<p><b>Кому</b><input name="address">
 
<hr><b>Тема</b><input name="subject">
<hr><textarea name="body" cols="80" rows="40"></textarea>
<p><input type="button" value="Отправить" onclick="sendMail (this.form)">
</form>

@dz1rt91 · 10.08.2016, 17:25 **[ТС]**

Сообщение от kalabuni

верно ли я понял код?
P.S а как сделать что бы мне без перезагрузки пришло уведомление о том что форма успешно отправлена?

@BANO · 11.08.2016, 00:23

Не по теме:

Сообщение от dz1rt91

верно ли я понял код?

Откуда нам известно?

@kalabuni · 11.08.2016, 08:53

Сообщение от dz1rt91

верно ли я понял код?

почти... только можно добавить в строке for (var el = f.elements, j = 0; j < el.length - 1; j++) // проходимся по всем элементам формы, кроме последней кнопки "Отправить"

Сообщение от dz1rt91

как сделать что бы мне без перезагрузки пришло уведомление о том что форма успешно отправлена?

во-первых, эта функциональность должна быть в вашем файле sendForm.php, т.е. в нём должны быть строки типа следующих:

PHP
1
2
3
4
 if ($send) {$msg = 'письмо успешно отправлено';}
else {$msg = 'произошла ошибка отправки письма, попробуйте отправить его чуть позже ещё раз';}
header ("Content-type: text/plain; charset=utf-8");
print $msg;

во-вторых, в HTML-коде файла отправки где-то после закрывающего тега </form> желательно предусмотреть контейнер для вывода сообщения, например, такой

HTML5
1
<div id="mess" style="position: absolute; z-index: 5; left: 234px; top = 123px; width: 198px; text-align: center; border: 1px solid red; display: none"></div>

и, в-третьих, в коде скрипта внутри функции sendMail () перед строкой XHR.send (null); надо добавить следующие восемь строчек

JavaScript
1
2
3
4
5
6
7
8
XHR.onreadystatechange = function ()
    {
    if (XHR.readyState == 4)
        {
        document.getElementById ('mess').innerHTML = XHR.responseText;
        document.getElementById ('mess').style.display = 'block';
        }
    }

@dz1rt91 · 11.08.2016, 11:52 **[ТС]**

kalabuni, спасибо, а можешь последний кусок кода прокомментить?

@kalabuni · 11.08.2016, 12:52

Сообщение от dz1rt91

а можешь последний кусок кода прокомментить?

Не по теме:

я к обращаюсь к вам "на вы", а в ответ вы мне "тычете" -- вы плохо воспитаны?
или мы как-то с вами пили на брудершафт, но я просто про это подзабыл?

XHR -- это объект, который и осуществляет асинхронную связь между страницей и серверным файлом
перед тем как отправить запрос серверному файлу методом send () объект "готовится" получить ответ на свой запрос
у этого ответа на запрос есть так называемый статус готовности readyState -- изначально он равен 0 ( т.е. UNINITIALIZED -- неинициализирован)
затем он меняется на 1 (т.е. LOADING -- грузится)
потом становится равным 2 (LOADED -- загружен)
позже становится равным 3 (INTERACTIVE -- почти готов к использованию страницей)
и, наконец равняется 4 (COMPLETE -- полностью готов)
так вот, событие onreadystatechange объекта XHR отслеживает любые изменения статуса готовности ответа
в строке #1 моего javascript-кода на это событие назначается безымянная функция, которая в реальности запускается четыре раза, но только в последний раз, когда статус ответа станет равен 4 (когда ответ станет "полностью готов"), эта функция внутри контейнера c id ="mess" строкой #5 прописывает текст, полученный от серверного файла, и строкой #6 делает этот контейнер видимым (он же изначально был невидим -- style="display: none" -- см. мой HTML-код в сообщении выше)
первые три раза (когда статус ответа меняется на 1, на 2 и на 3) эта функция запускается, но ничего не делает

@dz1rt91 · 11.08.2016, 22:11 **[ТС]**

Извините что "тыкал", спасибо Вам огромное! Счастья, здоровья, всех благ!

@BANO · 12.08.2016, 23:24

Не по теме:

Сообщение от dz1rt91

Счастья, здоровья, всех благ!

Прям Медведев...

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23

	Отправка формы на почту с JavaScript и AJAX 09.08.2016, 17:57. Показов 24891. Ответов 19 Метки нет (Все метки) Уважаемые форумчане, подскажите, как отправить данные формы на почту с использованием только НАТИВНОГО JS и AJAX? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	09.08.2016, 18:17
	dz1rt91, ищите сервисы, которые так делают. AJAX не является SMTP, так что невозможно. Только прослойки или API какой-нибудь, который будет отправлять его за вас. 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	09.08.2016, 18:25 [ТС]
	BANO, Мне дали тестовое задание в котором написано следующее: "предполагается, что форма поздравления будет отравлять данные полей на сервер по AJAX при помощи GET запроса" как это реализовать? 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	09.08.2016, 18:35 [ТС]
	BANO, первую переменную я понял, мы создаем объект который хранит все данные из формы, так? а второй объект? ""get&" + " это строка которая будет складывать строку грубо говоря? типа на выходе будет строка такого типа get&var1get&var2 ? а что за функция фльтр? ты можешь, пожалуйста, разобрать что написано с 6 по 11 строку? очень прошу 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	09.08.2016, 18:45 [ТС]
	BANO, спасибо! давно занимаешься js? Добавлено через 2 минуты BANO, книга Ильи Кантора подходит для изучения js? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	09.08.2016, 18:47
	dz1rt91, про Илью я слышал. Не знаю как у него с книгами, но сайт он отличный запилил. 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	10.08.2016, 11:21 [ТС]
	kalabuni, как это сделать? 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	10.08.2016, 16:32 [ТС]
	kalabuni, допустим у меня есть этот php файл и называется он sendForm.php, что делать дальше? как обратиться к этому файлу, меня вот это интересует, как js файлом отправить данные которые нужно выслать на email php файлу? 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	11.08.2016, 11:52 [ТС]
	kalabuni, спасибо, а можешь последний кусок кода прокомментить? 0

@dz1rt91 0 / 0 / 0 Регистрация: 22.12.2014 Сообщений: 23
	11.08.2016, 22:11 [ТС]
	Извините что "тыкал", спасибо Вам огромное! Счастья, здоровья, всех благ! 0