我有一个名为orderproductForm的表单和未定义数量的输入。
我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面，并发送orderproductForm表单的所有输入。
我想有一种方法是
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
然而，我不知道确切地所有表单输入。是否有一个特性，功能或一些东西，只是发送所有的表单输入?
当前回答
你可以使用Ajax Form Plugin或jQuery serialize函数中的ajaxForm/ajaxSubmit函数。
AjaxForm：
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
or
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
当按下提交按钮时，ajaxForm将发送。ajaxSubmit立即发送。
序列化:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
AJAX序列化文档在这里。
其他回答
我觉得很奇怪，没有人提到数据是一个对象。对我来说，这是传递数据最干净、最简单的方式:
$('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 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提交表单?
简单版(不发送图像)
<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>
复制并粘贴页面上的一个窗体或所有窗体的一个窗体
这是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设置HTTP_X_REQUESTED_WITH的报头来检测ajax请求 为php
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is 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);
}
}
});
我真的很喜欢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方法的相应事件接收到的参数相同。
