Отправка данных формы с помощью AJAX и jQuery

02.05.19

Отправлять данные формы без перезагрузки страницы будем с помощью jQuery. Обработку серверной части рассматривать не будем.

Пример формы:

<form id="test_ajax_form" method="post" action="test_handler_form.php">
    <input type="text" name="name" placeholder="Name">
    <textarea name="message" placeholder="Message"></textarea>
    <input type="submit" value="Send" name="submit">
</form>

JS

$(function(){
    $('#test_ajax_form').on('submit', function(e){
        e.preventDefault();
        let data = $(this).serialize(),
            url = $(this).attr('action');
 
        $.ajax({
            method: "POST",
            url: url,
            data: data
        }).done(function(){
            alert('Success!');
        }).fail(function(){
            alert('Error!');
        });
    });
});
blog comments powered by Disqus