我有一个名为orderproductForm的表单和未定义数量的输入。

我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面,并发送orderproductForm表单的所有输入。

我想有一种方法是

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

然而,我不知道确切地所有表单输入。是否有一个特性,功能或一些东西,只是发送所有的表单输入?


当前回答

考虑使用最接近的

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

其他回答

我得到了以下信息:

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

这假设post到'url'返回一个ajax形式的{success: false, error:'my error to display'}

你可以随意改变。请随意使用该片段。

我觉得很奇怪,没有人提到数据是一个对象。对我来说,这是传递数据最干净、最简单的方式:

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

    return false;
});

然后,在后端:

// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

还有一个提交事件,可以像这样触发$("#form_id").submit()。如果表单已经很好地用HTML表示,则可以使用此方法。您只需读入页面,用东西填充表单输入,然后调用.submit()。它将使用表单声明中定义的方法和动作,因此不需要将其复制到javascript中。

例子

我知道这是一个与jQuery相关的问题,但现在使用JS ES6的事情要容易得多。由于没有纯javascript的答案,我想我可以添加一个简单的纯javascript解决方案,这在我看来是更干净的,通过使用fetch() API。这是实现网络请求的一种现代方式。在您的例子中,由于已经有了表单元素,我们可以简单地使用它来构建我们的请求。

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

这是一个简单的参考:

// 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 actionUrl = form.attr('action');
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response from the php script.
        }
    });
    
});