将复选框数组传递给 AJAX 调用答案

【问题标题】：Pass Checkbox Array into AJAX call将复选框数组传递给 AJAX 调用
【发布时间】：2019-06-05 15:52:50
【问题描述】：

我正在尝试将一个复选框数组传递给一个 AJAX 调用，以获取我正在处理的搜索表单：

HTML：

<form id="searchForm">
    <input type="checkbox" class="typesSearch" name="types[]" value="Fundraiser" checked />&nbsp;Fundraiser<br>
    <input type="checkbox" class="typesSearch" name="types[]" value="Conference" checked />&nbsp;Conference<br>
</form>

JavaScript：

var types = [];

var eventTypes = document.forms['searchForm'].elements[ 'types[]' ];

for (var i=0, len=eventTypes.length; i<len; i++) {
    if (eventTypes[i].checked ) {
        types.push($(eventTypes[i]).val());
    }
}

$.ajax({
    url: "https://www.example.com/search.php",
    method: "post",
    data:{
        eventname: eventname,
        types: types
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

PHP：

$event_types = $_POST['types'];

类型数组在 javascript 端很好，当它到达 PHP 端时，$_POST['types'] 被读取为空。

为什么 $_POST['types'] 被读取为空？在 AJAX 调用中是否需要定义我传递的是数组而不是字符串？

【问题讨论】：

您使用的是 jQuery 1.9.0 还是更新版本？来自文档：You should use "type" if you're using versions of jQuery prior to 1.9.0.。 method 参数是在版本 1.9.0 中添加的。 api.jquery.com/jquery.ajax。如果使用的是旧版本的 jQuery，那么 type 数组将可以通过 PHP 脚本中的 $_GET 获得，因为这是使用的默认 HTTP 方法。

标签： javascript php arrays ajax checkbox

【解决方案1】：

尝试在“数据”处使用以下内容：

$.ajax({
    url: "https://www.example.com/search.php",
    method: "POST",
    data:{
        eventname: eventname,
        types: JSON.stringify(types)
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

这样，类型是一个字符串，你需要在 PHP 端将其解析为数组对象。

在服务器端，您可以使用以下代码获取数组。 $item[0]

$event_types = $_POST['types'];
$item = (json_decode(stripslashes($event_types)));

【讨论】：

【解决方案2】：

您需要序列化您的数组以便在 $_POST 中接收它，因此您的 ajax 应该如下所示：

$.ajax({
    url: "https://www.example.com/search.php",
    method: "post",
    data:{
        eventname: eventname,
        types: JSON.stringify(types) //serializied types[]
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

【讨论】：

jQuery 默认会自动执行此操作。来自文档：Data to be sent to the server. It is converted to a query string, if not already a string.。 api.jquery.com/jquery.ajax
从最新版本开始，是的。但在旧版本中，默认情况下可能不会执行此操作。

【解决方案3】：

您可能也想试试这个解决方案：

JS：

data: { typesArray: types }

PHP：

$types = $_REQUEST['typesArray'];

【讨论】：