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

  Александр Маврин   Комментариев нет

PHP + Ajax

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< ?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 запрос и немного его кастомизируем под свои нужды.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

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

  1. При отправке формы запускаем функцию
  2. Вносим все данные в переменную
  3. Открываем Ajax соединение
  4. Указываем тип передачи данных
  5. Ссылка на обработчик
  6. Прогоняем данные через функцию serialize() (преобразование данных в строку)
  7. Запуск функции перед отправкой данных
  8. Делаем текст на кнопке прозрачным
  9. Добавляем кнопке бутстраповские стили от анимированного прогресс-бара
  10. Запуск функции при ошибке отправки данных
  11. Вывод сообщения об ошибке на экран
  12. Запуск функции после успешной отправки
  13. Возвращаем тексту кнопки начальный цвет
  14. Удаляем анимацию
  15. Выводим сообщение об успешной отправке
  16. Запускаем функцию очистки полей формы с интервалом в 2 секунды

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

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

СКАЧАТЬ

Добавить страницу в закладки

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *