Как получить ответ со страницы ajax и вывести его без перезагрузки страницы?

317
01 сентября 2021, 16:20

Учу js, выдумываю задачи, зациклилась на одной, очень хочется послушать знающий людей)) Есть форма с одним полем ввода - промокод. Ввожу промокод и кликаю на кнопку "Активировать промокод". Вот как выглядит форма.

<div class="ta-c">
    <h3 class="promo-title light">Введите свой промокод</h3>
        <form action="" class="promo-form">
        <input type="text" name="promo" id="promocod" class="promo-input" placeholder="____" maxlength="4" >
        <div class="promo-text"></div>
        <button class="button js-promo-activate" id="active_promocod">Активировать промокод</button>
    <div class="result">
        <span id="answer"> <div class="messages_promo"></div> </span>
        <span class="loader hidden"><img src="img/loader.gif" alt=""></span>
    </div>
   </form>
</div>

Далее, пишу скрипт, отправляю в файл controllPromocod.php для проверки, есть ли этот промокод в системе или нет. Вот тут мне не очень нравится, как я все это пишу, кажется так все громоздко.

 $(document).ready(function(){
            $('#active_promocod').click(function(){
                // собираем данные с формы
                var promocod=$('#promocod').val();
                alert(promocod);
                //                 отправляем данные
                $.ajax({
                    url: "../controllPromocod.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: { // что отправляем
                        "promocod": promocod
                    },
                    // после получения ответа сервера
                   success: function(data) {
                    $('.messages_promo').html(data.result); // выводим ответ сервера
                    setTimeout(function() {
                        $(".loader").addClass('hidden');
                    }, 50000) // 10 секунд
                    }
                });
            });
        });

Далее в файле php идет проверка

<?php
$msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность поля
    (isset($_POST['promocod']) AND !empty($_POST['promocod']))?'':$errors[] = "Заполните поле 'Промокод'";
    if(empty($errors))   
    {  
        $SQL = "SELECT * FROM CRM_PARTNERS WHERE promocod='".$_POST['promocod']."'";
        $r = mysqli_query($mysql,$SQL);
        if(!$r) exit(mysqli_error($mysql));
        $hk=mysqli_fetch_assoc($r);
        if (isset($hk['promocod']) AND !empty($hk['promocod']))
        {
            // собираем данные из формы
            $message .= "Промокод: " . $_POST['promocod']. "<br/>";  
            $message .= "Дата и время (MSC): " . date("d.m.y H:i"); 
            send_mail($message); // отправим письмо
            $msg_box = "<span style='color: green;'>Промокод активирон!</span>";
        }
        else 
        {
            $message="Промокода нет в системе";
            $msg_box = "";
            foreach($errors as $one_error){
            $msg_box .= "<span style='color: red;'>$one_error</span><br/>";
            }
            send_mail($message); // отправим письмо

        }
    }    
         echo json_encode(array(
        'result' => $msg_box
        ));
        // функция отправки письма
            function send_mail($message){
                // почта, на которую придет письмо
                $mail_to = "test@ya.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);
            }
?>

Что в итоге получается: ввожу промокод срабатывает скрипт и отправляет промокод в файл на проверку далее мне приходит на почту письмо, есть промокод или нет его но на странице, где поле ввода не выводит информация, есть промокод или нет его страница перезагружается - ПОЧЕМУ?

Подскажите пожалуйста, хочу научиться)))

READ ALSO
Как сделать на странице автоматическое срабатывание элемента?

Как сделать на странице автоматическое срабатывание элемента?

Как сделать на странице автоматическое срабатывание элемента button onclick, при выборе в select-е определенного значения и сохранение его на другой...

117
Как сгенерировать файл docx в браузере на клиенте?

Как сгенерировать файл docx в браузере на клиенте?

Есть ли библиотека с помощью которой можно генерировать файлы docx на клиенте, без node js

131
Переключение блоков на другие блоки когда мишка внизу блока

Переключение блоков на другие блоки когда мишка внизу блока

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

80
Как загрузить иконку которая будет загружаться лишь при ховере?

Как загрузить иконку которая будет загружаться лишь при ховере?

есть иконка в svg в разных цветах, черный и белый при ховереТаким образом при ховере загружается новая иконка

101