Правильный пример Ajax запроса для отправки формы c помощью jQuery и JavaScript

Рейтинг: 12Ответов: 3Опубликовано: 22.04.2015

Нужен правильный пример Ajax запроса для отправки формы c помощью jQuery и JavaScript, но чтобы после отправки данных формы не совершался переход на страницу, которая указана в атрибуте "action" у формы. Заранее спасибо.

javascript jquery php ajax
Источник: Stack Overflow на русском

Ответы

▲ 18Принят
$(function() {
      $('form').submit(function(e) {
        var $form = $(this);
        $.ajax({
          type: $form.attr('method'),
          url: $form.attr('action'),
          data: $form.serialize()
        }).done(function() {
          console.log('success');
        }).fail(function() {
          console.log('fail');
        });
        //отмена действия по умолчанию для кнопки submit
        e.preventDefault(); 
      });
    });
▲ 6
$('form').submit(function (e) {
    e.preventDefault();
    var data = $('form').serializeArray();
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: success,
        dataType: dataType});});

ну само собой в url должен быть адрес страницы, на которую шлется запрос. Также вместо preventDefault можно возвращать значение: return false;

▲ 3
$( document ).ready(function() {
    $("#btn").click(
        function(){
            sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php');
            return false; 
        }
    );
});

function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: jQuery("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
            result = jQuery.parseJSON(response);
            document.getElementById(result_form).innerHTML = "Имя: "+result.name+"<br>Телефон: "+result.phonenumber;
        },
        error: function(response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправленны.";
        }
    });
}

Полный пример с Backend на php: https://ru.wh-db.com/article/kak-otpravit-formu-bez-perezagruzki-stranici/