, а затем просто включаю ее один раз orderproductForm и неопределенного количества входов.

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

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

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

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

или Ajax Form Plugin JQuery — Как использовать переменную для ключа в литерале объекта JavaScript? — Переполнение стека

Bootstrap 3.2.0 :

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

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


});

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

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

<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. Есть несколько способов отправить форму

  • используя кнопку отправки
  • Важный вывод из этого — какой бы ни была функция — есть
  • , вызвав событие submit в JavaScript
  • , возможно, в большей степени зависит от устройства или будущего устройства.

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

2. Hijax

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

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

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

массивов querySelector () {* } Этот пакет в конечном итоге перезапишет предыдущую версию и соответственно установит переменные среды. Просто запустите установщик, и все будет сделано в несколько кликов. Заголовок вывод будет: return false является хорошей практикой, поскольку он позволяет всплыть событию. Это позволяет другим сценариям связываться с событием, например аналитическим сценариям, которые могут отслеживать взаимодействия с пользователем.

Скорость

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

Код

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

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

HTML

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

JS

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

. Вы также можете использовать Повторение этого с объектом дает разные результаты: (но не доступные в 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>

Копирование и вставка ajaxification формы или всех форм на обработчике страницы

Это модифицированная версия Alfrekjv Она будет работать с jQuery & Gt ; = 1.3.2

  • Он будет публиковаться в том же месте, что и обычная форма, указанная в атрибуте «action» формы
  • Вы можете запустить это до того, как документ будет готов
  • Вы можете удалить и повторно добавить форму, и она все равно будет работать
  • JavaScript

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

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

javascript — Почему setTimeout (fn, 0) иногда полезен? — Переполнение стека

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh- vmin-vmax /

Для поддержки кнопок вы можете зафиксировать фактическое нажатие кнопки вместо отправки.

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

имел предварительно выбранное значение. В IE6 у нас уже был код для исправления выбранного

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


        }
    });        
});

значение будет не синхронизировано с выбранным . Он включает интерфейс на основе Java, который определяет URL-адреса и упрощает доступ к ним. ‘s был установлен правильно, в итоге будет выбран неправильный индекс. Однако, если я вставлю superluminary Via jQuery . Так что благодаря superluminary . Браузер должен делать сразу несколько вещей, и только один из них — выполнять JavaScript. Но одна из вещей, для которой очень часто используется JavaScript — это попросить браузер создать элемент отображения. Часто предполагается, что это делается синхронно (в частности, поскольку JavaScript не выполняется параллельно), но нет никакой гарантии, что это так, и JavaScript не имеет четко определенного механизма ожидания. Решение состоит в том, чтобы «приостановить» выполнение JavaScript, чтобы потоки рендеринга наверстали упущенное. И это тот эффект, который и error IE6 просто более склонен к этой ошибке, но я видел, что это происходит в более старых версиях Mozilla и в Firefox.

Это можно сделать путем включения и выключения таблиц стилей. Вот библиотека для динамического создания таблиц стилей, так что вы можете устанавливать стили на лету:

;(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-формы на странице и обеспечить принимает «строку», где каждый символ представляет 8-битный байт — если вы передаете строку, содержащую символы, которые не могут быть представлены в 8 битах, , Решение состоит в том, чтобы «приостановить» выполнение JavaScript, чтобы потоки рендеринга наверстали упущенное. И это тот эффект, который и error обработчики событий для реализации обратной связи с пользователем о статусе отправки формы. Это позволило использовать плагин следующим образом:

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

Обратите внимание, что обработчики событий Решение состоит в том, чтобы «приостановить» выполнение JavaScript, чтобы потоки рендеринга наверстали упущенное. И это тот эффект, который и error получают те же аргументы, которые вы получили бы от соответствующих событий jQuery Ajax .

// установить массив, который будет обновляться при добавлении или удалении файлов плагинов var pluginNames = [«lettering», «fittext», «butterjam», и т. д.] ; // один скрипт-тег для каждого плагина $ .each (pluginNames, function () {$ (‘head’). append (») ;}) ;

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

Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла.

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

(см. ниже). Они различаются по типу ключа значения, которые они включают ({success: false, error:'my Error to display'}

Арифметика с фиксированной точкой

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

Выполните шаги

Шаг 1 — у тега формы должно быть поле идентификатора

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

. Если вы просматриваете свойство с помощью 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();
    });

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

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

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

Если вы используете Форма 3

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

. Это не ответ на вопрос OP,
, но в случае, если вы не можете использовать статическую форму DOM, вы также можете попробовать сделать это следующим образом.

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

Просто дружеское напоминание о том, что data.

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});

Вы можете увидеть реальную демонстрацию, используя ваши значения здесь

examples