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

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

我想有一种方法是

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

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


当前回答

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

$('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元素上定义的属性的解决方案:

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

避免发送多个formdata:

在表单再次提交之前,不要忘记解绑定submit事件, 用户可以调用sumbit函数不止一次,也许他忘记了一些东西,或者是一个验证错误。

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

简单版(不发送图像)

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

复制并粘贴页面上的一个窗体或所有窗体的一个窗体

这是Alfrekjv的答案的修改版本

它将使用jQuery >= 1.3.2 您可以在文档准备好之前运行该命令 您可以删除并重新添加表单,它仍然可以工作 它将发布到与标准表单相同的位置,在 表单的“action”属性

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

在服务器端,你可以用jquery设置HTTP_X_REQUESTED_WITH的报头来检测ajax请求 为php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is 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 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.
        }
    });
    
});

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

例子