Отправка данных без перезагрузки страницы. PHP+ Ajax

6 комментариев

6361

PHP + Ajax

Не так давно я публиковал материал на тему отправки писем при помощи PHP-функции mail. Теперь мы возьмем тот же скрипт, слегка его изменим, вынесем в отдельный файл под названием mail.php и добавим немного магии, будем отправлять данные без перезагрузки страницы. Помогут нам в этом библиотека jQuery и технология Ajax. Все тот же POST запрос мы будем обрабатывать в фоновом режиме, но для того, чтобы было понятно, что на странице что-то происходит, отобразим процесс отправки данных в виде небольшой анимации, а по окончании выведем сообщение об успешной отправке или об ошибке.

Ajax отправка данных с формы

PHP обработчик данных форм

< ?php
$to = "<myemail@example.com>";
$email = $_POST['email'];
$subject = $_POST["theme"];
$page = 'Страница спасибо за комментарий'; 
$message = '
<html>
<body>
<center>	
<table border=1 cellpadding=6 cellspacing=0 width=90% bordercolor="#DBDBDB">
 <tr><td colspan=2 align=center bgcolor="#E4E4E4"><b>Информация</b></td></tr>
 <tr>
  <td><b>Откуда</b></td>
  <td>'.$page.'</td>
 </tr>
 <tr>
  <td><b>Адресат</b></td>
  <td><a href="mailto:'.$email.'">'.$email.'</a></td>
 </tr>
 <tr>
  <td><b>Тема</b></td>
  <td>'.$subject.'</td>
 </tr>
 <tr>
  <td><b>Сообщение</b></td>
  <td>'.$_POST['message'].'</td>
 </tr>
</table>
</center>	
</body>
</html>'; 
$headers  = "Content-type: text/html; charset=utf-8\r\n";
$result = mail($to, $subject, $message, $headers);
?>

Письмо будет приходить на почту в том же виде, что и в предыдущем посте, я лишь убрал вывод сообщений. Форма тоже идентична. Теперь, нужно подключить jQuery. Я использую Bootstrap, чтобы не писать свой велосипед, вы можете сделать так же. И теперь, чтобы отправка происходила без перезагрузки станицы, мы пропишем вполне стандартный Ajax запрос и немного его кастомизируем под свои нужды.

<script type="text/javascript">
$(function(){
  $('form').submit(function() {
  var form = $(this);
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: form.serialize(),
        beforeSend: (function(){
          $('.submit').css('color', 'transparent');
          $('.submit').addClass('progress-bar progress-bar-striped progress-bar-animated bg-warning');
        }),error: function(XMLHttpRequest, textStatus, errorThrown) {
              $('.error-data').slideDown();
            },success: (function() {
                $('.submit').css('color', '#333');
                $('.submit').removeClass('progress-bar progress-bar-striped progress-bar-animated bg-warning');
                $('.alrt').fadeIn();
        setTimeout(function() {
            form.trigger("reset");
        }, 2000);
    })
})
    return false;
})
})
</script>

Теперь давайте во всем этом разберемся построчно.

При отправке формы запускаем функцию
Вносим все данные в переменную
Открываем Ajax соединение
Указываем тип передачи данных
Ссылка на обработчик
Прогоняем данные через функцию serialize() (преобразование данных в строку)
Запуск функции перед отправкой данных
Делаем текст на кнопке прозрачным
Добавляем кнопке бутстраповские стили от анимированного прогресс-бара
Запуск функции при ошибке отправки данных
Вывод сообщения об ошибке на экран
Запуск функции после успешной отправки
Возвращаем тексту кнопки начальный цвет
Удаляем анимацию
Выводим сообщение об успешной отправке
Запускаем функцию очистки полей формы с интервалом в 2 секунды

Отправка формы без перезагрузки страницы

Отправка данных без перезагрузки страницы — это наиболее простое, что можно сделать на Ajax. Есть и более сложные вещи, например получение данных. Но об этом мы поговорим в другой раз. Если что-то непонятно, пишите в комментариях вопросы. И напоследок предлагаю скачать готовый скрипт отправки формы без перезагрузки страницы.

СКАЧАТЬ

Любая сумма на развитие сайта

Категории: Скачать Уроки Тэги: Ajax jQuery PHP

Отправка данных без перезагрузки страницы. PHP+ Ajax

PHP обработчик данных форм

Читайте также:

Добавить комментарий Отменить ответ