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

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

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

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

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

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

15 ответов


вы можете использовать функции ajaxForm/ajaxSubmit из Плагин Формы Ajax или функция serialize jQuery, которые.

AjaxForm:

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

или

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

ajaxForm отправит, когда кнопка отправки нажата. ajaxSubmit немедленно посылает.

сериализовать:

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

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

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


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

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


    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.
           }
         });

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

Я надеюсь, что это помогает вам.


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

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<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>

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

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

  • С помощью кнопки
  • нажав enter
  • путем запуска события отправки в JavaScript
  • возможно больше в зависимости от устройства или будущего устройства.

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

2. Hijax

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

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

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

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

скорость

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

код

предполагая, что вы согласны со всем вышеизложенным, и вы хотите поймать событие отправки и обработать его через 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');
});

Edit:

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

(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)

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

HTML-код

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

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

вы также можете использовать виде 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.


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

<form action="/my/ajax/url" class="my-form">
...
</form>
<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
  • вы можете запустить это до того, как документ готов
  • вы можете удалить и повторно добавить форму, и он все равно будет работать
  • он будет размещать в том же месте, что нормальная форма, указано в атрибут "действие" формы

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, но слишком сильно отклонился от него, поэтому решил опубликовать его как отдельный ответ.

не отправляет файлы, не поддерживает кнопки, например, нажатие кнопки (включая кнопку отправки) отправляет ее значение в виде данных формы, но поскольку это запрос 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 С этим заголовком, что jQuery устанавливает HTTP_X_REQUESTED_WITH для php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

этот код работает даже с входным файлом

$(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)
        {


        }
    });        
});

мне очень понравилось ответ by 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 ajax метод.


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

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 в виде {success: false, error:'my Error to display'}

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


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

$('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();
    });

jQuery AJAX отправить форму, это не что иное, как отправить форму с помощью идентификатора формы при нажатии на кнопку

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

Шаг 1-тег формы должен иметь поле ID

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

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

<button>Save</button>

Шаг 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);
        }
    });
});

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

как отправить форму с помощью jQuery AJAX?


чтобы избежать нескольких formdata отправляет:

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

 $("#idForm").unbind().submit( function(e) {
  ....

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

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

и форма сериализуется следующим образом:

firstName=Chris&lastName=Halcrow ...

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

HTML-форму

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

функция 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/


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

примеры