jQuery AJAX форма отправки

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

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

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

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

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

Анна Убогих
5970
Редактировал вопрос 9-го февраля 2022 в 3:13
abhinav3414
Редактировал вопрос 30-го апреля 2018 в 12:46
Программирование
javascript forms jquery ajax submit
25-го декабря 2009 в 1:31
38 просмотров

Это простая ссылка:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

});

Надеюсь, она вам поможет.

Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 3:13
Community
Редактировал ответ 2-го марта 2019 в 5:30
Комментарии (20)
Решение

Вы можете использовать функции ajaxForm/ajaxSubmit из Ajax Form Plugin или функцию jQuery serialize.

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

или

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm будет отправляться после нажатия кнопки отправки. ajaxSubmit отправляется немедленно.

Serialize:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

документация по сериализации AJAX находится здесь.

Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 3:13
Комментарии (9)

Еще одно аналогичное решение с использованием атрибутов, определенных на элементе формы:





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

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>
Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 3:13
Комментарии (4)

Есть несколько вещей, которые вы должны иметь в виду.

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

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

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

2. Hijax

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

Мы должны вытащить URL и метод от формы, поэтому если HTML изменения, мы не'т необходимость обновления на JavaScript.

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

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

Скорость

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

Код

Если вы согласны со всем вышесказанным, и вы хотите поймать событие Submit, и делаю это через AJAX (образец hijax), вы могли бы сделать нечто подобное:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Вы можете вручную инициировать отправку формы, когда вы хотите с помощью 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) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Добавление данных-автоматическая отправка атрибут тега form, а затем вы можете сделать это:

В HTML

В JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});
Комментарии (9)

Вы также можете использовать виде FormData (но не доступны в IE):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

Это, как вы используете виде FormData.

Mikael Dúi Bolinder
Редактировал ответ 27-го марта 2018 в 8:06
Комментарии (4)

Простая версия (не отправлять изображения)


...

<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Копирование и вставка поддержки AJAX формы или всех форм на странице

Он представляет собой модифицированную версию Alfrekjv'с ответить

  • Он будет работать с jQuery >= 1.3.2
  • Вы можете запустить это до того, как документ готов
  • Вы можете удалить и повторно добавить форму и он все равно будет работать
  • Это будет пост в том же месте, в нормальной форме, указанной в действия S&запах мяты, форме ';&; атрибут

В JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Я хотел изменить Alfrekjv'ы ответ, но слишком сильно отклонялись от нее, поэтому решил выложить это как отдельный ответ.

Не отправляет файлы, не поддерживает кнопок, например при нажатии кнопки (включая кнопку "Submit") отправляет своего значения как данные формы, а потому, что это AJAX-запрос, нажав на кнопку отправлен не будет.

Для поддержки кнопки вы можете захватить собственно кнопку нажать вместо "отправить".

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

На стороне сервера, вы можете обнаружить запрос AJAX](http://davidwalsh.name/detect-ajax) с этим заголовком, что jQuery наборы HTTP_X_REQUESTED_WITH для PHP

В PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}
Комментарии (2)

Этот код работает даже при входном файле 

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {

        }
    });        
});
Комментарии (3)

Мне очень понравился этот ответ по superluminary и особенно то, как он завернул это решение в на jQuery плагин. Так что спасибо superluminary за очень полезный ответ. В моем случае, я хотел, чтобы плагин, который позволит мне определить успех и ошибка обработчики событий с помощью вариантов, когда плагин инициализируется.

Так вот что я придумал:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

Этот плагин позволяет мне очень легко "по-ajaxify-то" HTML-формы на странице и предоставить onsubmit, успех и ошибка обработчики событий для реализации обратной связи с пользователем статуса отправки формы. Это позволило плагин будет использоваться следующим образом:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

Обратите внимание, что успех и ошибка обработчики событий получают те же аргументы, которые вы получите из соответствующего события jQuery с Аякс метод.

Community
Редактировал ответ 23-го мая 2017 в 12:34
Комментарии (0)

Я получил следующее на меня:

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

где

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("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

Это предполагает, пост 'URL-адрес' возвращает Ajax в виде {успех: ложь, ошибка:&#39;моя ошибка отображения&#39;}

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

Комментарии (1)

на jQuery AJAX для отправки формы, ничего, но подать заявку, используя форму код при нажатии на кнопку

Пожалуйста, следуйте инструкции по

Шаг 1 - тега form должен иметь поля id


.....

Кнопку, которую вы собираетесь нажать

Save

Шаг 2 - отправить события в jQuery, который помогает представить форму. в приведенном ниже коде мы готовим запрос JSON с HTML-элемента имя.

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

для демо нажмите на ссылку ниже

[Как отправить форму с помощью jQuery Аякс?][1]

Комментарии (0)

рассмотрите возможность использования ближайший

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });
Комментарии (0)

Во избежание многократного виде FormData посылает:

Дон'т забудьте отвязать представить событие, пока снова прислана, Пользователь может вызвать функцию заявку более одного раза, может, он забыл что-то, или ошибка проверки.

 $("#idForm").unbind().submit( function(e) {
  ....
Комментарии (0)

Если вы're, используя форма.сериализовать() - вы должны дать каждый элемент формы имени такой:

<input id="firstName" name="firstName" ...

И форма сериализируется такой:

firstName=Chris&lastName=Halcrow ...
Комментарии (0)

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

HTML-формы


    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us">

функции jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Более подробную информацию и примеры на странице: http://www.spiderscode.com/simple-ajax-contact-form/

Комментарии (0)

Это не ответ на ОП'ы вопрос, но в случае если вы можете'т использовать статические формы дом, вы можете также попробовать такой.

var $form = $('').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});
Комментарии (0)

Просто дружеское напоминание о том, что "данные" может быть объектом, тоже:

`` $('форма#фу').подать(функция () { $.технология AJAX({ адрес: 'http://foo.bar/some-ajax-script&#39;, тип: 'пост', тип: 'в формате JSON', данных: { 'фу': 'некоторые-фу', 'бар': 'некоторые-бар' } }).всегда(функция (данных) { консоль.журнала(данные); });

возвращает false; }); ``

Комментарии (0)

Я знаю, что это библиотека jQuery вопрос, но теперь дни с JS на ES6 все гораздо проще. Поскольку нет чистый код JavaScript ответ, я думал, я мог бы добавить решение простой чистый код JavaScript для этого, что на мой взгляд гораздо чище, используя метод fetch() АПИ. Этот современный способ реализует сетевые запросы. В вашем случае, поскольку у вас уже есть элемент формы, мы можем просто использовать его, чтобы построить нашу просьбу.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));
Комментарии (0)

Существует также событие submit, которое можно запустить следующим образом $("#form_id").submit(). Вы используете этот метод, если форма уже хорошо представлена в HTML. Вы'просто прочитаете страницу, заполните вводимые данные формы, а затем вызовете .submit(). При этом будут использованы метод и действие, определенные в объявлении формы, поэтому вам не нужно копировать их в свой javascript.

примеры

Комментарии (3)