通过 jQuery Ajax 发送多个表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19208699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending multiple forms data through jQuery Ajax
提问by Valentin G.
I have two forms for which I want to send the data through jQuery Ajax call. I managed to send it successfully for one form but I am not able to send the data from both of them through the same Ajax call.
我有两种表单，我想通过 jQuery Ajax 调用为其发送数据。我设法为一种表单成功发送了它，但我无法通过同一个 Ajax 调用从它们两个发送数据。
My forms are:
我的表格是：
<form id="filter-group1" method="post" name="filtergroup1">
<input type="checkbox" name="colour1" value="Value1" onclick="filterBy()" /><label>Option 1</label>
<input type="checkbox" name="colour2" value="Value2" onclick="filterBy()" /><label>Option 2</label>
<input type="checkbox" name="colour3" value="Value3" onclick="filterBy()" /><label>Option 3</label>
</form>
<form id="filter-group2" method="post" name="filtergroup2">
<input type="checkbox" name="size1" value="Value1" onclick="filterBy()" /><label>Option 1</label>
<input type="checkbox" name="size2" value="Value2" onclick="filterBy()" /><label>Option 2</label>
<input type="checkbox" name="size3" value="Value3" onclick="filterBy()" /><label>Option 3</label>
</form>
And the function is:
功能是：
function filterBy() {
var fgroup1 = document.filtergroup1;
var fgroup2 = document.filtergroup2;
var dataString1 = $(fgroup1).serialize();
var dataString2 = $(fgroup2).serialize();
var filterdata = [];
filterdata.push(dataString1,dataString2);
$.ajax( {
type: 'POST',
url: 'filter.php',
data: filterdata,
success: function(data) {
console.log(data);
$('#message').html(data);
}
});
}
I have this in the php file:
我在 php 文件中有这个：
echo var_export($_POST);
The function works fine for one form if I replace data: with
如果我替换数据，该函数对一种形式工作正常：
data: dataString1,
I am trying to achieve the same result with the data from both forms but I don't want to use a different function for each form.
我试图用来自两种表单的数据获得相同的结果，但我不想为每个表单使用不同的函数。
I appreciate any help. Thank you.
我很感激任何帮助。谢谢你。
回答by Terry
jQuery's serialize()method concatenates your input values with an '&' symbol - therefore when you are pushing two serialized form data, you are creating an array and not concatenating the values in two forms with '&' (which is the one that will be parsed correctly). You can either: (1) concatenate the items in the array into a string with '&' or (2) use $("#form1, #form2").serialize()to do it:
jQuery 的serialize()方法使用“&”符号连接您的输入值 - 因此，当您推送两个序列化的表单数据时，您正在创建一个数组，而不是使用“&”（这是将被正确解析的）连接两种形式的值）。您可以：(1) 使用 '&' 将数组中的项连接成一个字符串，或 (2) 使用$("#form1, #form2").serialize()它：
function filterBy() {
// Construct data string
var dataString = $("#filter-group1, #filter-group2").serialize();
// Log in console so you can see the final serialized data sent to AJAX
console.log(dataString);
// Do AJAX
$.ajax( {
type: 'POST',
url: 'filter.php',
data: dataString,
success: function(data) {
console.log(data);
$('#message').html(data);
}
});
}
[Edit]: On a side note, I highly discourage using inline JavaScript. You should separate content from function. Instead, use the .click()function, like:
[编辑]：附带说明一下，我非常不鼓励使用内联 JavaScript。您应该将内容与功能分开。相反，使用该.click()函数，例如：
$("form input[type='checkbox']").click(function() {
var dataString = $("#filter-group1, #filter-group2").serialize();
// (and more...)
});
I also don't exactly understand the reasoning behind using two separate forms...
我也不完全理解使用两种不同形式背后的原因......
回答by Joe Buckle
You're using a function call in your filtergroup2form that doesn't exist.
您在filtergroup2表单中使用了不存在的函数调用。
filterBy2()I assume needs to be filterBy()
filterBy2()我认为需要 filterBy()
