11

我有两种形式，我想通过 jQuery Ajax 调用发送数据。我设法成功地为一个表单发送了它，但我无法通过同一个 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>

功能是：

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

我在 php 文件中有这个：

echo var_export($_POST);

如果我替换数据，该函数适用于一种形式：

data: dataString1,

我正在尝试使用两种形式的数据来实现相同的结果，但我不想为每种形式使用不同的函数。

我很感激任何帮助。谢谢你。

4

2 回答 2

23

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。您应该将内容与功能分开。相反，请使用该.click()功能，例如：

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

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

于 2013-10-06T12:31:37.330 回答
0

您在filtergroup2表单中使用了一个不存在的函数调用。

filterBy2()我认为需要filterBy()

于 2013-10-06T12:11:51.677 回答