jQuery AJAX 提交表单

jQuery AJAX submit form

提问人:Nathan H 提问时间:12/25/2009 最后编辑:Kamil KiełczewskiNathan H 更新时间:5/7/2023 访问量:2557651

问:

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

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

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

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

但是,我并不确切知道所有表单输入。是否有特性、功能或其他东西可以发送所有表单输入?

JavaScript jQuery Ajax 提交 表单

评论


答:

867赞 jspcal 12/25/2009 #1

您可以使用 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 序列化文档

评论

256赞 Yarin 6/5/2012
.ajaxSubmit()/.ajaxForm()不是核心jQuery函数 - 你需要jQuery表单插件
0赞 Michael Peterson 12/2/2022
这似乎也不是jquery的核心功能:malsup.github.io/jquery.form.js
-24赞 billw 12/25/2009 #2

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

例子

评论

61赞 sparkyspider 12/20/2012
如果您删除您的帖子,您将获得已从您身上拿走的罚分。
2赞 superluminary 5/8/2013
这将提交表单,但不会通过 AJAX,因此不会回答问题。
14赞 nurettin 3/19/2014
@spider说了什么,再加上你会得到一个不错的徽章,叫做“同伴压力”
1674赞 Alfrekjv 8/6/2011 #3

这是一个简单的参考:

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

评论

70赞 macio.Jun 1/20/2013
但是form.serialize()无法在IE中发布<input type=“file”>
0赞 Papa De Beau 2/5/2015
调用的 URL 可以来自“http”还是必须是本地的?您的示例:var url = “path/to/your/script.php”;
1赞 HeroZero 10/26/2021
我在寻找相同的解决方案时找到了这个答案,看起来 form.serializeArray() 是另一个不错的选择。api.jquery.com/serializeArray/#serializeArray
0赞 Fakipo 9/8/2022
表单中需要有 action 属性吗?
0赞 MythThrazz 1/17/2023
值得注意的是,它也不会序列化“submit”字段,例如。<input type=“submit” name=“wont-be-serialized” value=“Sadly” />
492赞 3 revs, 2 users 79%Davide Icardi #4

另一个类似的解决方案,使用在表单元素上定义的属性:

<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>
54赞 macio.Jun 1/20/2013 #5

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

评论

1赞 Sorter 10/23/2021
+1 这是最好的解决方案。IE在过去十年中被考虑过。现在,FormData是标准解决方案。metamug.com/article/html5/ajax-form-submit.html
189赞 superluminary 5/7/2013 #6

您需要牢记一些事项。

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

  • 使用“提交”按钮
  • 按 Enter 键
  • 通过在 JavaScript 中触发提交事件
  • 可能更多,具体取决于设备或未来的设备。

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

2. 希贾克斯

用户可能未启用 JavaScript。hijax 模式在这里很好,我们使用 JavaScript 温和地控制表单,但如果 JavaScript 失败,请保留它可提交。

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

3. 不显眼的 JavaScript

使用 event.preventDefault() 而不是返回 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();
});
31赞 Timo Huovinen 7/10/2013 #7

简单版(不发送图像)

<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
}
13赞 BruceHill 11/13/2013 #8

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

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

请注意,successerror 事件处理程序接收的参数与从 jQuery ajax 方法的相应事件接收的参数相同。

评论

0赞 JJS 2/15/2022
在当前版本的 jquery 表单插件中提交之前 jquery-form.github.io/form/options/#beforesubmit
9赞 Tarion 1/22/2014 #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' 的 post 以{success: false, error:'my Error to display'}

您可以根据需要进行更改。随意使用该片段。

评论

1赞 1252748 10/14/2014
这里有什么用?为什么您要使用 AJAX 提交表单,却重定向到新页面?target
4赞 Pavel Zheliba 11/14/2014 #10

要避免多次发送表单数据:

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

 $("#idForm").unbind().submit( function(e) {
  ....
26赞 Shaiful Islam 2/8/2015 #11

此代码即使在文件输入时也有效

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


        }
    });        
});

评论

3赞 Chris Hopkins 4/10/2015
请注意,formData() 是 IE10+ developer.mozilla.org/en-US/docs/Web/API/FormData
4赞 Chris Halcrow 4/27/2016 #12

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

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

表单像这样序列化:

firstName=Chris&lastName=Halcrow ...
5赞 test30 10/26/2016 #13

考虑使用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赞 suresh raj 12/20/2016 #14

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

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/

9赞 Jeet Singh Parmar 1/11/2018 #15

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提交表单?

2赞 wonsuc 4/30/2019 #16

这不是 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);
        }
    }
});
4赞 Lucas Bustamante 5/1/2019 #17

我感到惊讶的是,没有人提到作为一个对象。对我来说,这是传递数据的最干净、最简单的方法:data

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

评论

0赞 SupaMonkey 9/11/2020
OP 说他不知道字段名称/未确定,因此在这种情况下不能使用数据,因为不知道字段名称。
8赞 Alain Cruz 10/17/2019 #18

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

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"));
2赞 Marty 11/26/2019 #19

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>
8赞 Kamil Kiełczewski 1/22/2020 #20

尝试

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

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

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}
<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="[email protected]">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

0赞 MiMFa 5/6/2023 #21

这是一个很棒且易于使用的功能,我制作了用于处理任何表单的功能,您只需调用函数即可使用。当然,你可以发送自己的选择器来指定表单,甚至是你自己的特殊函数来处理成功、错误等:(希望有用)handleForm()

const handleForm = function(
    selector = 'form',
    successFunc = function(data,selector){
        $(selector + ' .result').remove();
        const resultMsg = 'The form submitted successfully!';
        $(selector).append("<div class='result success'>"+resultMsg+"</div>");
    },
    errorfunc = function(data,selector){
        $(selector + ' .result').remove();
        const resultMsg = data??'There a problem occured!';
        $(selector).append("<div class='result error'>"+resultMsg+"</div>");
    },
    beforeFunc = function(data,selector){
        $(selector + ' .result').remove();
    },
    processHandler = function(data){},
    timeout = 600000
){
    $(selector).submit(function(e) {
        e.preventDefault();

        const form = $(this);
        const actionPath = form.attr('action');
        const methodName = form.attr('method');
        const requestData = form.serialize();
        const btns = selector+' :is(button:is([type=submit], [type=reset]), input:is([type=button], [type=submit], [type=reset]))';

        $.ajax({
            type: methodName,
            url: actionPath,
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) myXhr.upload.addEventListener('progress', processHandler, false);
                return myXhr;
            },
            success: function (data) {
                successFunc(data,selector);
                $(btns).removeClass('hide');
                $(selector).css('opacity','1');
            },
            error: function (data) {
                errorfunc(data,selector);
                $(btns).removeClass('hide');
                $(selector).css('opacity','1');
            },
            beforeSend: function (data) {
                beforeFunc(data,selector);
                $(btns).addClass('hide');
                $(selector).css('opacity','.5');
            },
            async: true,
            data: requestData,
            cache: false,
            contentType: (typeof requestData === 'string')?'application/json; charset=utf-8':false,
            processData: false,
            timeout: timeout
        });
    });
}

享受。。。