10

jQuery AJAX: Отправка формы

13

У меня есть форма с именем orderproductForm и неопределенное количество полей ввода.

Я хочу выполнить запрос через jQuery.get или Ajax, который будет вызывать страницу и отправлять все поля формы orderproductForm.

Я предполагаю, что один из способов сделать это — использовать что-то подобное:

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Однако я не знаю точно все поля ввода формы. Существует ли функция или метод, который позволит отправить ВСЕ поля формы?

5 ответ(ов)

16

Это простой пример кода на jQuery, который демонстрирует, как отправить данные формы с помощью AJAX:

// это идентификатор формы
$("#idForm").submit(function(e) {
    
    e.preventDefault(); // предотвращаем выполнение стандартной отправки формы.

    var form = $(this);
    var actionUrl = form.attr('action');
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // сериализуем элементы формы.
        success: function(data) {
            alert(data); // показываем ответ от PHP скрипта.
        }
    });
    
});

В данном коде мы используем метод .submit() для привязки обработчика события к форме с идентификатором idForm. При отправке формы сразу же предотвращается её стандартное поведение с помощью e.preventDefault().

Далее мы получаем URL для отправки данных из атрибута action формы и используем функцию $.ajax() для выполнения POST-запроса. Данные формы сериализуются с помощью метода .serialize(), что позволяет удобно передать их на сервер.

Если запрос успешен, то в случае положительного ответа от сервера, например, скрипта на PHP, мы выводим его содержимое через alert(data).

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

4

Вы можете использовать атрибуты, определенные в элементе формы, для обработки отправки формы с помощью AJAX. Пример реализации может выглядеть следующим образом:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Поля ввода формы (не забудьте указать атрибуты name). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {
        e.preventDefault(); // Предотвращаем стандартное поведение отправки формы.

        $.ajax({
            type: frm.attr('method'), // Используем метод из атрибута метода формы.
            url: frm.attr('action'), // Используем URL из атрибута action формы.
            data: frm.serialize(), // Сериализуем данные формы.
            success: function (data) {
                console.log('Отправка прошла успешно.');
                console.log(data);
            },
            error: function (data) {
                console.log('Произошла ошибка.');
                console.log(data);
            },
        });
    });
</script>

Таким образом, данный код позволяет вам легко обрабатывать отправку формы с использованием атрибутов и AJAX, не перегружая страницу. Не забудьте указать все необходимые атрибуты для полей ввода, чтобы данные корректно сериализовались!

1

Есть несколько моментов, которые нужно учесть.

1. Существует несколько способов отправить форму

  • используя кнопку отправки
  • нажав клавишу Enter
  • вызвав событие отправки в JavaScript
  • и, возможно, больше, в зависимости от устройства или будущих устройств.

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

2. Hijax

Пользователь может не иметь включенный JavaScript. Здесь полезен паттерн hijax, при котором мы деликатно берем под контроль форму с помощью JavaScript, но оставляем возможность отправки формы, если JavaScript оказывается недоступен.

Мы должны извлечь URL и метод из формы, чтобы, если HTML изменится, нам не пришлось обновлять JavaScript.

3. Ненавязчивый JavaScript

Использование event.preventDefault() вместо return false считается хорошей практикой, так как это позволяет событию всплывать. Это дает возможность другим скриптам реагировать на событие, например, скриптам аналитики, которые могут отслеживать взаимодействия пользователей.

Скорость

Идеально, если мы будем использовать внешний скрипт, а не вставлять его напрямую в HTML. Мы можем подключить его в секции head страницы с помощью тега script или внизу страницы для повышения скорости. Скрипт должен ненавязчиво улучшать пользовательский опыт, а не мешать.

Код

Предполагая, что вы согласны со всем вышеперечисленным и хотите поймать событие отправки и обработать его через AJAX (паттерн hijax), вы можете сделать что-то наподобие этого:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Предотвращаем отправку формы через браузер
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // При желании уведомить пользователя об успешной отправке...
    }).fail(function(data) {
      // При желании уведомить пользователя об ошибке...
    });
  });
});

Вы можете вручную вызвать отправку формы в любое время через JavaScript, используя что-то вроде:

$(function() {
  $('form.my_form').trigger('submit');
});

Правка:

Недавно мне пришлось это сделать, и я в итоге написал плагин.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // При желании уведомить пользователя об успешной отправке...
      }).fail(function(data) {
        // При желании уведомить пользователя об ошибке...
      });
    });
    return this;
  }
})(jQuery);

Добавьте атрибут data-autosubmit в тег вашей формы, и вы сможете сделать следующее:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Здесь будет форма -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});
0

Этот код работает даже с вводом файлов. Вот краткое объяснение:

$(document).on("submit", "form", function(event) {
    event.preventDefault(); // Отменяем стандартное поведение формы
    $.ajax({
        url: $(this).attr("action"), // URL-адрес, указанный в атрибуте action формы
        type: $(this).attr("method"), // Метод запроса (GET или POST), указанный в атрибуте method
        dataType: "JSON", // Ожидаемый формат ответа от сервера
        data: new FormData(this), // Создаем объект FormData из текущей формы, что позволяет отправлять файлы
        processData: false, // Не обрабатываем данные, так как это делается автоматически при использовании FormData
        contentType: false, // Не указываем Content-Type, FormData самостоятельно установит корректный заголовок
        success: function(data, status) {
            // Обработка успешного ответа
        },
        error: function(xhr, desc, err) {
            // Обработка ошибки запроса
        }
    });        
});

Этот код использует jQuery для перехвата события отправки формы. Он предотвращает стандартное поведение отправки и вместо этого отправляет данные асинхронно с помощью AJAX. Использование FormData позволяет отправлять как обычные данные формы, так и файлы, которые были выбраны для загрузки.

0

Вам нужно реализовать функцию для обработки отправки формы с помощью AJAX. Вы можете использовать следующий пример:

formSubmit('#login-form', '/api/user/login', '/members/');

Где функция formSubmit выглядит так:

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Ошибка сервера: " + res.status + " " + res.statusText);
            });
        event.preventDefault();
    });
}

Данный код предполагает, что ответ от сервера в виде AJAX будет содержать объект в формате {success: false, error:'my Error to display'}.

Вы можете изменять этот код по своему усмотрению и использовать предложенный фрагмент.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь