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

Существует множество способов отправки данных с помощью jQuery на PHP обработчик. В этой статье рассмотрим один из самых простых способов отправки формы с помощью JavaScript без перезагрузки страницы.

1. На страницу с формой подключаем библиотеку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Добавляем форму на страницу:

<form method="POST" id="myform" action="javascript:void(null);" onsubmit="sendform()">
    <input type="email" name="email" placeholder="Ваш email : " required>
    <input type="submit" value="Отправить">      
    <div id="status"></div>
</form>

3. Перед формой добавляем следующий JavaScript:

<script>
        function sendform()  { 
            var msg   = jQuery('#myform').serialize(); // ID формы
            jQuery.ajax({    
            method: 'POST', // Метод отправки
            url: 'send.php', // Адрес обработчика
            beforeSend: function(){
                jQuery('#status').html('Отправляю...'); // Промежуточный статус
            },
            data: msg,
            cache: false,  
            success: function(html){  

            jQuery('#status').html(html);  }  });  // Вывод ответа
        } 
</script>

4. Создаем обработчик send.php:

<?
    echo "Ваш e-mail: ".$_POST['email'];
?>

На этом все! Я считаю что это самая простая и надежная форма отправки сообщений без перезагрузки страницы.

Если у вас возникли сложности с отправкой сообщений без перезагрузки, пишите в комментариях или мне в телеграм.

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

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Вам также может понравиться