JQuery AJAX отправить форму

751

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

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

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

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

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

Спасибо

Теги:
html-form
submit

15 ответов

700
Лучший ответ

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

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 приведена здесь.

  • 2
    интересная идея, однако, я не контролирую серверную часть, на которую я звоню, поэтому я не могу отправить ей сериализованные данные
  • 23
    Да, вы можете, имя не важно, что он будет делать, это отправлять пары каждого ключа формы и каждой переменной формы.
Показать ещё 8 комментариев
1007

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

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

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form elements.
           success: function(data)
           {
               alert(data); // show response from the PHP скрипт.
           }
         });

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

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

  • 36
    Но form.serialize () не может публиковать <input type = "file"> в IE
  • 1
    Отличный ответ для нормальной подачи формы!
Показать ещё 17 комментариев
391

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

<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>
  • 0
    Любые предложения о том, как это сделать, если атрибут name включает «.»? (Требование на стороне сервера, не моя идея).
  • 0
    Включите ответ об ошибке, чтобы завершить его. Никогда не знаешь, когда получишь ошибку, всегда должен это учитывать.
Показать ещё 2 комментария
153

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

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

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

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

2. Hijax

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

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

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

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

Speed ​​

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

код

Предполагая, что вы согласны со всем вышеперечисленным, и вы хотите поймать событие отправки и обработать его через 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();
});
  • 2
    как я могу добавить обратные вызовы для функций «done» и «fail»? что-то вроде $ ('form [data-autosubmit]'). autosubmit (). done (function ({...})); это возможно?
  • 1
    Привет @Crusader - конечно, вместо того, чтобы этот плагин возвращал это, вы могли бы заставить его возвращать событие ajax, тогда вы могли бы цепляться прямо на него. С другой стороны, вы могли бы получить плагин успешного обратного вызова.
Показать ещё 7 комментариев
24

Вы также можете использовать FormData​​strong > (но недоступно в 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.

  • 7
    Я вижу, что FormData теперь поддерживается IE10. Через несколько лет это будет предпочтительным решением.
  • 3
    В чем преимущество этого способа?
Показать ещё 2 комментария
23

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

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

Скопируйте и вставьте ajaxification формы или всех форм на странице

Это измененная версия ответа Альфреква

  • Он будет работать с 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 elements.
            success: function(data) {
                console.log(data); // show response from the PHP скрипт. (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
}
  • 0
    Как это будет работать, если вы хотите отправить файл с этой формой?
  • 1
    @YamiMedina это не простое решение, вам нужно отправить весь запрос в другом формате (multipart) с данными файла
21

Этот код работает даже с вводом файла

$(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
    Просто обратите внимание, что formData () - это IE10 + developer.mozilla.org/en-US/docs/Web/API/FormData
  • 1
    dataType: 'json' важен, если вы хотите использовать form.serialize ()
Показать ещё 1 комментарий
11

Мне действительно понравился этот ответ 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, success и error для реализации обратной связи пользователю с статусом формы submit. Это позволило использовать плагин следующим образом:

 $('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.

9

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

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

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

  • 1
    Для чего здесь target ? Зачем вам отправлять форму с AJAX, только для перенаправления на новую страницу?
5

рассмотрим использование 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();
    });
4

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

Пожалуйста, выполните шаги

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

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
Кнопка

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

<button>Save</button>

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

$("#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?

4

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

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

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

firstName=Chris&lastName=Halcrow ...
4

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

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

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

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

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/

-21

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

examples

  • 54
    если вы удалите свое сообщение, вы получите штрафные очки, которые были отняты у вас обратно.
  • 2
    Это отправит форму, но не через AJAX, поэтому не отвечает на вопрос.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню