Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.

Простая форма обратной связи на php и ajax. Код

Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.
В первом будет храниться верстка и js:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Обратная связь. Ajax</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
                    $('#btn_submit').click(function() { // собираем данные с формы                 var user_name    = $('#user_name').val();                 var user_email   = $('#user_email').val();                 var text_comment = $('#text_comment').val();                 // отправляем данные                 $.ajax({                     url: "action.php", // куда отправляем                     type: "post", // метод передачи                     dataType: "json", // тип передачи данных                     data: { // что отправляем                         "user_name":    user_name,                         "user_email":   user_email,                         "text_comment": text_comment                     },                     // после получения ответа сервера                     success: function(data){                         $('.messages').html(data.result); // выводим ответ сервера                     }                 });             });         });
    </script>
</head>

<body>
    <br/>
    <div class="messages"></div>
    <br/>
    <label>Ваше имя:</label>
    <br/>
    <input type="text" id="user_name" value="" />
    <br/>
    <label>Ваш e-mail:</label>
    <br/>
    <input type="text" id="user_email" value="" />
    <br/>
    <label>Текст сообщения:</label>
    <br/>
    <textarea id="text_comment"></textarea>
    <br/>
    <input type="button" value="Отправить" id="btn_submit" /> </body>

</html>

И второй файл, в котором будет находиться серверная логика, написанная на php:

<?php
    $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
    if($_POST['user_name'] == "")    $errors[] = "Поле 'Ваше имя' не заполнено!";
    if($_POST['user_email'] == "")   $errors[] = "Поле 'Ваш e-mail' не заполнено!";
    if($_POST['text_comment'] == "") $errors[] = "Поле 'Текст сообщения' не заполнено!";
 
    // если форма без ошибок
    if(empty($errors)){    
        // собираем данные из формы
        $message  = "Имя пользователя: " . $_POST['user_name'] . "<br/>";
        $message .= "E-mail пользователя: " . $_POST['user_email'] . "<br/>";
        $message .= "Текст письма: " . $_POST['text_comment'];     
        send_mail($message); // отправим письмо
        // выведем сообщение об успехе
        $msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
    }else{
        // если были ошибки, то выводим их
        $msg_box = "";
        foreach($errors as $one_error){
            $msg_box .= "<span style='color: red;'>$one_error</span><br/>";
        }
    }
 
    // делаем ответ на клиентскую часть в формате JSON
    echo json_encode(array(
        'result' => $msg_box
    ));
     
     
    // функция отправки письма
    function send_mail($message){
        // почта, на которую придет письмо
        $mail_to = "my@mail.ru";
        // тема письма
        $subject = "Письмо с обратной связи";
         
        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо
         
        // отправляем письмо
        mail($mail_to, $subject, $message, $headers);
    }
     
?>

Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники.

Голосов  (1)
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)