Отправка данных формы php ajax

Форма обратной связи на PHP и Ajax

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

Я уже выкладывал запись в которой рассказывал как сделать простую форму обратной связи — http://prog-time.ru/prostaya-forma-obratnoj-svyazi-na-php/

Если вы читали прошлую запись, то знаете что форма должна быть написана внутри тега form . Вся информация передается через поля input .

Для реализации отправки формы через Ajax, нам понадобится 2 файла:

1. index.php — здесь будет HTML форма и jQuery обработчик
2. send.php — PHP обработчик

В самом начале вам нужно подключить библиотеку jQuery. Добавьте эту строчку внутрь тега head .

HTML код

input и textarea — поле для ввода информации.

Каждому тегу input и textarea нужно дописать уникальное значение атрибута name, по которому мы в дальнейшем будем идентифицировать поля.

 
Ваше имя: 
 Ваш e-mail: 
 Телефон: Текст сообщения: 

jQuery код

В самом низу необходимо разместить jQuery код.

$(document).ready(function()< /*ПРОВЕРЯЕМ НАЖАТА ЛИ КНОПКА ОТПРАВКИ*/ $('#btn_submit').click(function()< // собираем данные с формы var user_name = $('#name').val(); var user_email = $('#email').val(); var user_phone = $('#phone').val(); var text_comment = $('#text_comment').val(); // отправляем данные $.ajax(< url: "send.php", // куда отправляем type: "post", // метод передачи data: < // что отправляем "name": user_name, "email": user_email, "phone": user_phone, "text_comment": text_comment >, error:function()<$("#erconts").html("Произошла ошибка!");>, /* если произойдет ошибка в элементе с id erconts выведится сообщение*/ beforeSend: function() < $("#erconts").html("Отправляем данные. "); >, success: function(result) < /* В случае удачной обработки и отправки выполнится следующий код*/ $('#erconts').html(result); console.log("ntcn"); >>); >); >);

PHP обработчик

Теперь мы прописывает в PHP файл код Ajax запроса. У меня это файл send.php

 else< /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/ $to = "your_mail@mail.ru"; /* Адрес, куда отправляем письма*/ $subject = "Письмо с обратной связи"; /*Тема письма*/ $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers .= "From: \r\n";/*ОТ КОГО*/ /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */ $message .= "Имя пользователя: ".$name."\n"; $message .= "Почта: ".$email."\n"; $message .= "Телефон: ".$phone."\n"; $message .= "Сообщение: ".$text_comment."\n"; /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/ $send = mail($to, $subject, $message, $headers); /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/ if ($send == "true") < echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n"; >/*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/ else < echo "Не удалось отправить, попробуйте снова!"; >> ?>

Не отправляется письмо!

Если вы пользуетесь Open Server, то у вас не получится отправить письмо на реальную почту. Вместо этого Open Server создает текстовый документ, в который записывается письмо. Все подобные текстовые документы отправки, находятся в \userdata\temp\email

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

На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax(< url: '/index.php', /* Куда пойдет запрос */ method: 'get', /* Метод передачи (post или get) */ dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);

Код можно сократить используя функцию $.get

$.get('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Или сокращенная версия – функция $.post

$.post('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

• Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
• serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json'); $result = array( 'text' => 'Текст', 'error' => 'Ошибка' ); echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

. // Очистка буфера ob_end_clean(); header('Content-Type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();

Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

Или

Дождаться выполнения AJAX запроса

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Простой пример:

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */

Отправка HTTP заголовков

$.ajax(< url: '/index.php', method: 'get', dataType: 'html', headers: , success: function(data) < console.dir(data); >>);

В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:

Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax(< url: '/index.php', method: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect. Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else < alert('Uncaught Error. ' + jqXHR.responseText); >> >);

Комментарии 4

В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);

$("#form").on("submit", function() $.ajax( url: '/handler.php', 
method: 'post', 
dataType: 'html', 
data: $(this).serialize(), 
success: function(data) $('#message').html(data); 
> 
>); 
return false;
>);

$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

Отправка данных формы на email с помощью php и ajax

В данной заметке представлен рабочий скрипт для отправки данных формы на почту без перезагрузки страницы. С минимальными изменениями этот скрипт можно скопировать и использовать в любом проекте и на любой CMS, т.е. он полностью рабочий. Единственное, о чем стоит сказать отдельно: В этой заметке я не уделил внимание визуальной красоте формы, так как основная тема, в данном случае, все-таки сам механизм работы. Онлайн-демо, по понятным причинам, также не представлено.

1. Разметка формы

Итак, для начала нужно создать саму форму (все id и имена я указываю сразу, чтобы не удлинять повествование).

Обратите внимание, для формы на ajax не указываются атрибуты method и action (они будут указаны позже, в JS-коде). Также все поля в данном случае обязательны для заполнения (атрибут required), но это совершенно не обязательно. Обязательным требованием является указание атрибутов name и id. На этом с html закончили (Для того, чтобы форма была красивой нужно добавить классы к тегам и применить css-стили к данным классам и, по желанию, к указанным id).

2. PHP-скрипт отправки

Далее следует создать php-файл, который будет обрабатывать данные, полученные из формы, и отправлять их на указанный в скрипте email. В нашем случае файл называется «form_ask_us_ru.php».
Сам код будет выглядеть так, как показано ниже:

'; $fMail = 'Почта: '.$_POST['ask-us-email'].' 
'; $fMessage = 'Сообщение: '.$_POST['ask-us-text'].' 
'; $AllInOne = $fName.$fMail.$fMessage; $to = 'alex@alexryabikov.ru'; $headers="From: Alexryabikov.ru \nReply-to:info@alexryabikov.ru\nContent-Type: text/html; charset=\"utf-8\"\n"; // функция, которая отправляет наше письмо mail($to, 'Свяжитесь с нами', $AllInOne, $headers); ?>

Итак, в данном скрипте все данные из формы забираются через переменные вида $_POST[»];, после этого, все письмо объединяется в переменной $AllInOne. Переменная $to — это почта, на которую будут высланы данные формы, $headers — «заголовки» письма (от кого, адрес для ответа, кодировка письма). Далее следует функция mail(), которая принимает в качестве аргумента все вышеуказанные переменные. Текст «Свяжитесь с нами», принятый в качестве аргумента, в данном случае — это тема письма.

3. Ajax-скрипт + базовая анимация

В принципе, скрипт с небольшими модификациями, может работать и без ajax, но нас интересует именно отправка формы без перезагрузки страницы, поэтому продолжаем. Совершенно неважно как будет подключаться javascript-код в страницу: отдельным файлом или же прямо перед закрывающим . Я, обычно, подключаю прямиком в шаблон (но это, скорее, дело привычки). И так, сам код выглядит следующим образом:

Первая строка — это обработка события по отправке формы, триггером в данном случае служит id тега form. Далее появляется переменная с id popup_text — это всего лишь пустой контейнер div с таким айди, размещенный в любом месте страницы/шаблона. Строка url — содержит ссылку на файл-обработчик данных, типом отправки указывается POST. Метод serialize() — возвращает строку в виде, пригодном для обработки php-скриптом (Это если совсем упрощенно). В случае успеха происходит обработка успешной отправки и в ранее пустом контейнере popup_html всплывает надпись «Ваше сообщение успешно отправлено!», которое постепенно растворяется на экране (Тут можно выбрать другой эффект анимации, либо поиграться с таймингом, это все на вкус и цвет). Методы .val(), примененные к каждому элементу формы — очищают форму от ранее введенных данных (Если этого не требуется, то можно убрать эти строки). В блоке error — можно настроить обработку возможных ошибок при отправки данных, но это не относиться к теме данной статьи.

Итог: На выходе имеем полностью рабочий скрипт, который был апробирован на разных сайтах и CMS. Можно забирать и пользоваться. Надеюсь, заметка была достаточно полезной.

Другие читатели также интересовались:

Источник