通过jQuery Ajax发送多个表单数据

我有两个表单，我想通过jqueryajax调用发送数据。我成功地为一个表单发送了它，但我无法通过同一个Ajax调用从两个表单发送数据

我的表格是：

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

我在php文件中有以下内容：

echo var_export($_POST);

如果我将data:with替换为

data: dataString1,

我试图用两个表单中的数据获得相同的结果，但我不想对每个表单使用不同的函数

---

谢谢你的帮助。谢谢。

您正在

过滤器组2

表单中使用一个不存在的函数调用

filterBy2（）

我假设需要是

filterBy（）

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

[编辑]：另一方面，我强烈反对使用内联JavaScript。您应该将内容与函数分开。相反，请使用

。单击（）

函数，如：

$("form input[type='checkbox']").click(function() {
    var dataString = $("#filter-group1, #filter-group2").serialize();
    // (and more...)
});

---

我也不完全理解使用两种不同形式背后的原因…

是的，我现在已经纠正了这一点，我尝试使用第二个函数，但忘了在这里进行纠正。好吧，JavaScript似乎按照此小提琴的预期工作。

print\r（$\u POST['data']）的结果是什么；

在您的PHP文件中？结果是：array（'undefined'=>'undefined'，）@Terry这两个单独的表单位于网站的两个不同部分，为了可读性，我只是将它们粘贴在这里。感谢您提供有关内联JavaScript的提示，我将按照您的建议使用它。

$("form input[type='checkbox']").click(function() {
    var dataString = $("#filter-group1, #filter-group2").serialize();
    // (and more...)
});