我有一个带有名称orderproductForm和未定义数量的输入的表单。
我想做某种 jQuery.get 或 ajax 或类似的东西，可以通过 Ajax 调用页面，并发送表单的所有输入orderproductForm。
我想一种方法是做类似的事情
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
但是我并不完全知道所有的表单输入。是否有一个特性、功能或某些东西可以只发送所有表单输入？
这是一个简单的参考：
// 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.
}
});
});
您可以使用Ajax 表单插件中的 ajaxForm/ajaxSubmit 函数或 jQuery 序列化函数。
Ajax 表单：
$("#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())
另一个使用在表单元素上定义的属性的类似解决方案：
<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>
您需要牢记一些事项。
1. 有多种方式提交表单
因此，我们应该绑定到表单提交事件，而不是按钮单击事件。这将确保我们的代码现在和将来适用于所有设备和辅助技术。
2. Hijax
用户可能没有启用 JavaScript。一个hijax模式好这里，我们轻轻的使用JavaScript形式的控制，但离开它submittable如果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 属性添加到您的表单标签，然后您可以执行以下操作：
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
$(function() {
$('form[data-autosubmit]').autosubmit();
});
您还可以使用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 的方式。