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

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

2. Hijax

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

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

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

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

скорость

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

код

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

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

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

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

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

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

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

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

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

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

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

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

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

firstName=Chris&lastName=Halcrow ...

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

HTML Form

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

примеры