jQuery AJAX 提交表单
Posted
技术标签:
【中文标题】jQuery AJAX 提交表单【英文标题】：jQuery AJAX submit form 【发布时间】：2021-09-30 08:09:17 【问题描述】：我有一个名为 orderproductForm 的表单和未定义的输入数。
我想做某种 jQuery.get 或 ajax 或任何类似的东西，通过 Ajax 调用页面，并发送orderproductForm 形式的所有输入。
我想一种方法是做类似的事情
jQuery.get("myurl",
action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
但是，我并不完全了解所有表单输入。是否有一个特性、功能或其他东西可以发送所有表单输入？
【问题讨论】：
【参考方案1】：这是一个简单的参考：
// 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.serialize()不能在IE中发布 被调用的 url 可以来自“http”还是必须是本地的？你的例子： var url = "path/to/your/script.php"; 我在寻找相同的解决方案时找到了这个答案，看起来 form.serializeArray() 是另一个不错的选择。 api.jquery.com/serializeArray/#serializeArray【参考方案2】：您可以使用来自Ajax Form Plugin 的 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 serialization documentation is here.
【讨论】：
.ajaxSubmit()/.ajaxForm() 不是核心 jQuery 函数——你需要 jQuery Form Plugin【参考方案3】：
使用在表单元素上定义的属性的另一个类似解决方案：
<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>
【讨论】：
很好的解决方案。【参考方案4】：您需要牢记几件事。
1.提交表单的方法有多种
使用提交按钮 按回车键 通过在 JavaScript 中触发提交事件 可能更多取决于设备或未来的设备。因此我们应该绑定到表单提交事件，而不是按钮点击事件。这将确保我们的代码现在和将来适用于所有设备和辅助技术。
2。盖头
用户可能没有启用 JavaScript。 hijax 模式在这里很不错，我们使用 JavaScript 轻轻地控制表单，但如果 JavaScript 失败，则让它可提交。
我们应该从表单中提取 URL 和方法，所以如果 html 发生变化，我们不需要更新 JavaScript。
3.不显眼的 JavaScript
使用 event.preventDefault() 而不是 return 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();
);
【讨论】：
【参考方案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 这是最好的解决方案。 IE在过去十年被考虑。现在 FormData 是标准解决方案。 metamug.com/article/html5/ajax-form-submit.html【参考方案6】：简单版（不发送图片）
<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's答案的修改版
它适用于 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);
);
);
在服务器端你可以 detect an ajax request 使用 jquery 设置的这个标头 HTTP_X_REQUESTED_WITH
对于php
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
//is ajax
【讨论】：
【参考方案7】：此代码即使在文件输入的情况下也能正常工作
$(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)
);
);
【讨论】：
请注意 formData() 是 IE10+ developer.mozilla.org/en-US/docs/Web/API/FormData【参考方案8】：我真的很喜欢superluminary 的this answer，尤其是他的包装方式是jQuery 插件中的解决方案。所以感谢superluminary 提供了一个非常有用的答案。不过，就我而言，我想要一个插件，它允许我在插件初始化时通过选项定义 success 和 error 事件处理程序。
这就是我想出的：
;(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、success 和 error 事件处理程序来实现向用户反馈表单提交的状态。这允许插件按如下方式使用：
$('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
);
请注意，success 和 error 事件处理程序接收的参数与您从 jQuery 的相应事件接收的参数相同ajax 方法。
【讨论】：
在当前版本的jquery表单插件jquery-form.github.io/form/options/#beforesubmit之前提交【参考方案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' 的帖子以 success: false, error:'my Error to display' 的形式返回一个 ajax
你可以随意改变它。随意使用该 sn-p。
【讨论】：
这里的target 是什么？为什么要使用 AJAX 提交表单，然后重定向到新页面？【参考方案10】：
jQuery AJAX 提交表单，就是点击按钮时使用表单 ID 提交表单
请按步骤操作
第 1 步 - 表单标签必须有一个 ID 字段
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
你要点击的按钮
<button>Save</button>
第 2 步 - submit 事件在 jQuery 中，有助于提交表单。在下面的代码中，我们正在准备来自 HTML 元素 name 的 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);
);
);
点击下方链接观看现场演示
How to submit a Form using jQuery AJAX?
【讨论】：
【参考方案11】：我知道这是一个与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"));
【讨论】：
【参考方案12】：试试
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'【讨论】：
【参考方案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();
);
【讨论】：
【参考方案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/
【讨论】：
【参考方案15】：为了避免多次发送表单数据：
在再次提交表单之前不要忘记取消绑定提交事件， 用户可以多次调用 sumbit 函数，可能是他忘记了什么，或者是验证错误。
$("#idForm").unbind().submit( function(e)
....
【讨论】：
【参考方案16】：如果你使用 form.serialize() - 你需要给每个表单元素起这样的名字：
<input id="firstName" name="firstName" ...
然后表单会像这样被序列化：
firstName=Chris&lastName=Halcrow ...
【讨论】：
【参考方案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
【讨论】：
OP 说他不知道字段名称/未确定，因此在这种情况下不能使用数据，因为不知道字段名称。【参考方案18】：这不是 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);
);
【讨论】：
【参考方案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>
【讨论】：
【参考方案20】：还有提交事件，可以像这样触发 $("#form_id").submit()。如果表单已经在 HTML 中很好地表示，您将使用此方法。您只需在页面中阅读，用东西填充表单输入，然后调用 .submit()。它将使用表单声明中定义的方法和操作，因此您无需将其复制到您的 javascript 中。
examples
【讨论】：
如果你删除了你的帖子，你会得到已经从你身上拿走的罚分。 这将提交表单，但不是通过 AJAX，所以不回答问题。 @spider 所说的，还有一个很好的徽章，叫做“同伴压力”以上是关于jQuery AJAX 提交表单的主要内容，如果未能解决你的问题，请参考以下文章