javascript - sending - js submit form ajax




jQuery AJAX submit form (10)

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

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

Я хотел отредактировать ответ Альфрекюва, но слишком сильно отклонился от него, поэтому решил опубликовать это как отдельный ответ.

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

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

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

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

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

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


Вы можете использовать функции ajaxForm / ajaxSubmit из Ajax Form Plugin или функции сериализации 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 приведена здесь .


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

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

2. Хиджакс

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

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

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

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

скорость

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

Код

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

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

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

HTML

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

JS

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

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

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

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


У меня есть для меня следующее:

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

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


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

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

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

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

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


        }
    });        
});

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




html-form