jQuery AJAX提交表单


938

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

我想做某种jQuery.get或ajax或类似的事情,它将通过Ajax调用页面,并发送表单的所有输入 orderproductForm

我想一种方法是做类似的事情

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

但是我不完全知道所有的表格输入。是否有仅发送所有表单输入的功能部件或功能?

Answers:


814

您可以使用Ajax表单插件中的ajaxForm / ajaxSubmit函数或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序列化文档在这里


2
一个有趣的主意,但是,我不控制我正在呼叫的服务器端,因此无法发送序列化的数据
Nathan H,2009年

25
是的,您可以,名称的重要性并不重要,因为每个表单密钥和每个表单变量都必须成对发送。

6
它被序列化为查询字符串,就像您在GET调用中手动放入数组中的数据一样。我很确定这就是您想要的。
日1

1
哦,我知道了,然后将这个字符串添加到get调用中URL的末尾。我在想PHP序列化。抱歉。谢谢!
内森H 2009年

238
.ajaxSubmit()/ .ajaxForm()不是jQuery的核心功能-您需要jQuery Form插件
Yarin 2012年

1397

这是一个简单的参考:

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


});

希望对您有帮助。


46
但是form.serialize()无法在IE中发布<input type =“ file”>
macio.Jun 2013年

2
正常提交表单的好答案!
Sheek Geek,

1
与@BjørnBørresen相似,type: $(this).attr('method')如果method在表单上使用属性,也可以使用。
djule5 2015年

2
值得一提的是,自jQuery 1.8开始,不赞成使用.success,.error和.complete,而建议使用.done,.fail和.always。
亚当

2
@JohnKary的评论-很棒的文章,但看起来不再可用。这jQuery Events
KyleMit

455

使用在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>

如果name属性包含“。”,则如何执行此操作的任何建议?(服务器端要求,不是我的想法)。
约瑟夫·恩格尔弗罗斯特

包括对此的错误回调以使其完成。人们永远不知道什么时候会出错,应该总是将其解决。
aaron编码,2015年

1
如果您未设置方法或操作,则它们分别默认为get和当前URL。可以将此假设添加到代码中。
rybo111 2015年

1
每个jQuery文档(api.jquery.com/submit),frm.submit(function(event){..}); 等同于frm.on(“ submit”,function(event){..});。对我来说,后者更具可读性,因为很明显,您是在事件触发时将事件处理程序附加到要执行的元素上。
mehmet 2015年

177

您需要牢记一些事情。

1.有几种提交表格的方法

  • 使用提交按钮
  • 通过按回车
  • 通过触发JavaScript中的Submit事件
  • 可能更多取决于设备或将来的设备。

因此,我们应该绑定到表单提交事件,而不是按钮单击事件。这将确保我们的代码现在和将来都可在所有设备和辅助技术上运行。

2. Hijax

用户可能未启用JavaScript。一个hijax模式好这里,我们轻轻的使用JavaScript形式的控制,但离开它submittable如果JavaScript的失败。

我们应该从表​​单中提取URL和方法,因此,如果HTML发生更改,我们就不需要更新JavaScript。

3.简洁的JavaScript

使用event.preventDefault()代替return false是一个好习惯,因为它使事件冒泡。这使其他脚本可以加入事件,例如可能正在监视用户交互的分析脚本。

速度

理想情况下,我们应该使用外部脚本,而不是内联插入脚本。我们可以使用脚本标签在页面的顶部链接到此,或在页面底部链接以提高速度。该脚本应该悄悄地增强用户体验,而不是妨碍用户。

假设您同意以上所有内容,并且想要捕获Submit事件并通过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();
});

2
如何将回调添加到“完成”和“失败”功能?像$('form [data-autosubmit]')。autosubmit()。done(function({...});这样的可能性吗?
Crusader

1
@Crusader,您好-当然,您可以让它返回ajax事件,而不是让此插件返回该插件,然后直接链接到它。或者,您可以让插件接收成功回调。
superluminary

我看不出这是怎么发生的“ ..如果JavaScript失败,则使其可提交”。
mehmet

@mmatt-如果禁用了JavaScript,则表单仍然只是表单。用户单击提交,然后会基于常规浏览器提交表单。我们称这种渐进增强。由于现代屏幕阅读器支持JavaScript,因此如今已不是什么大问题。
superluminary

@mmatt-promise回调将有选择地接收一个包含数据的参数。
superluminary

41

您也可以使用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的方式


8
我看到IE10现在支持FormData。几年后,这将是首选的解决方案。
超级

3
这样有什么好处?
13年

1
@insign的优点是,不需要任何插件,并且可以在许多现代浏览器上使用。
KhoPhi 2015年

4
@insign FormData也可以处理文件(如果表单中有一个这样的字段),而serialize()只会忽略它。
mehmet 2015年

未捕获的TypeError:无法构造'FormData':参数1不是'HTMLFormElement'类型
rahim.nagori

28

简单版本(不发送图像)

<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> = 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 为php 设置的标头检测ajax请求HTTP_X_REQUESTED_WITH

的PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

如果您DID想要使用此表格发送文件,该怎么办?
亚米·麦地那

1
@YamiMedina不是一个简单的解决方案,您需要将整个请求以不同的格式(多部分格式)与文件数据一起发送
Timo Huovinen

22

此代码甚至适用于文件输入

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


        }
    });        
});


1
如果您希望使用form.serialize(),则dataType:'json'很重要
David Morrow

哇,这个FormData很棒!万一有人需要:Array.from(new FormData(form))遍历此formdata迭代器:)
test30

13

我真的很喜欢这个答案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成功错误事件处理程序,以实现向用户提交表单提交状态的反馈。这允许插件按如下方式使用:

 $('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提交表单,而仅重定向到新页面?
1252748

9

jQuery AJAX提交表单,仅是单击按钮时使用表单ID提交表单

请按照步骤

第1步-表单标签必须具有ID字段

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

您要点击的按钮

<button>Save</button>

第2步- 提交事件在jQuery中,它有助于提交表单。在下面的代码中,我们正在从HTML元素名称准备JSON请求。

$("#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提交表单?


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

5

我知道这是一个jQuery相关的问题,但是现在使用JS ES6的日子要容易得多。由于没有纯粹的javascript答案,我想我可以javascript为此添加一个简单的纯粹解决方案,我认为这可以通过使用fetch()API来解决。这是一种实现网络请求的现代方法。对于您而言,由于您已经有了一个form元素,我们可以简单地使用它来构建我们的请求。

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

4

为了避免发送多个formdata:

不要忘记取消提交事件的绑定,在再次提交表单之前,用户可以多次调用sumbit函数,也许他忘记了什么,或者是验证错误。

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

4

如果您使用表单 .serialize()-您需要给每个表单元素一个这样的名称:

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

表单像这样序列化:

firstName=Chris&lastName=Halcrow ...

4

您可以在提交功能中使用此功能,如下所示。

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/


2

这不是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);
        }
    }
});

2

尝试

fetch(form.action,{method:'post', body: new FormData(form)});


1

只是一个友好的提示,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;
});

1

的JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

的HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

-21

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

例子


58
如果您删除自己的信息,那么您将获得罚款点数。
sparkyspider 2012年

2
这将提交表单,但不会通过AJAX提交,因此不会回答问题。
超级照明

11
@spider所说的话,再加上一个漂亮的徽章,叫做“对等压力”
nurettin 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.