jQuery AJAX提交表单

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

我想做一些jQuery.get或ajax或类似的东西，通过Ajax调用页面，并发送表单orderproductForm的所有输入。

我想有一种方法是做这样的事情

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

然而，我不知道所有的表单输入。是否有一个功能，功能或东西，只是发送所有的表单输入？

2481332 次浏览
小开
最佳答案

您可以使用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序列化留档在这里

小开

还有提交事件，可以像这样触发$（"#form_id"）.提交（）。如果表单已经用超文本标记语言很好地表示，你会使用这种方法。你只需在页面中阅读，用东西填充表单输入，然后调用.提交（）。它将使用表单声明中定义的方法和操作，所以你不需要将其复制到JavaScript中。

例子

小开

这是一个简单的参考：

// 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="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>
小开

您也可以使用表单数据（但在IE中不可用）：

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector$.ajax({type: "POST",url: "yourURL",// where you wanna postdata: formData,processData: false,contentType: false,error: function(jqXHR, textStatus, errorMessage) {console.log(errorMessage); // Optional},success: function(data) {console.log(data)}});

这就是你使用表单数据的方式。

小开

有几件事你需要记住。

1.提交表格有几种方法

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

因此，我们应该绑定到表单提交事件，而不是按钮单击事件。这将确保我们的代码适用于现在和未来的所有设备和辅助技术。

2. Hijax

用户可能没有启用JavaScript。这里的hijax模式很好，我们使用JavaScript轻轻地控制表单，但如果JavaScript失败，则保持可提交。

我们应该从表单中提取URL和方法，因此如果超文本标记语言发生变化，我们不需要更新JavaScript。

3.不显眼的JavaScript

使用event.prevent默认（）而不是错误返回值是一种很好的做法，因为它允许事件冒泡。这允许其他脚本绑定到事件中，例如可能监控用户交互的分析脚本。

速度

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

代码

假设您同意上述所有内容，并且您想捕获提交事件并通过AJAX（一种hijax模式）处理它，您可以这样做：

$(function() {$('form.my_form').submit(function(event) {event.preventDefault(); // Prevent the form from submitting via the browservar 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-自动提交属性，然后您可以执行以下操作：

超文本标记语言

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

JS

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

简单版（不发送图片）

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

复制和粘贴一个表单或页面上的所有表单

这是阿尔弗雷克耶夫的答案的修改版本

  • 它将适用于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 dataif(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

php

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

我真的很喜欢这个答案 by超光速，尤其是他在jQuery插件中包装解决方案的方式。所以感谢超光速提供了一个非常有用的答案。不过，就我而言，我想要一个插件，允许我在插件初始化时通过选项定义成功和错误事件处理程序。

这是我想出来的：

;(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表单，并提供提交、成功和错误事件处理程序，用于向用户反馈表单提交的状态。这允许插件按以下方式使用：

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

请注意，成功和错误事件处理程序接收的参数与您从jQueryajax方法的相应事件接收的参数相同。

小开

我得到了以下几点：

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 to'url'返回{success: false, error:'my Error to display'}形式的ajax

您可以根据需要更改此代码段。请随意使用该代码段。

小开

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

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

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

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

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

}});});
小开

如果你使用的是形式.serialize（）-你需要给每个表单元素一个这样的名字：

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

并且表单被序列化为这样：

firstName=Chris&lastName=Halcrow ...
小开

考虑使用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();});
小开

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

超文本标记语言

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

小开

jQuery AJAX提交表单，只是在单击按钮时使用表单ID提交表单

请按照步骤

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

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

您要单击的按钮

<button>Save</button>

步骤2-提交事件在jQuery中，这有助于提交表格。在下面的代码中，我们正在准备来自超文本标记语言元素姓名的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提交表单？

小开

这不是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-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
小开

我知道这是一个与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"));
小开

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

超文本标记语言

    <ul class="list-group col-sm-6 float-left"><?phpforeach ($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>
小开

试试看

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="aa@bb.com"><input name="phone" value="123-456-666"><input type="submit"></form>
Look on Chrome Console > Network after/before 'submit'


提交答案