本文介绍如何使用 jquery 的 `serializearray()` 和 `$.param()` 配合数组操作，将多个同名复选框（如 `name="product-category"`）的选中值合并为单个逗号分隔字符串（如 `product-category=29,27`），而非默认的重复键格式（`product-category=29&product-category=27`）。
在 Web 表单中，当多个复选框共享相同的 name 属性（例如 name="product-category"）时，jQuery 的 .serialize() 方法会按标准 URL 编码规则生成多个同名参数，如 product-category=29&product-category=27。但后端（尤其是 PHP）通常期望接收单一参数值（如 product-category=29,27），便于用 explode(',', $_POST['product-category']) 统一解析。
解决思路是：绕过 .serialize() 的默认行为，改用 .serializeArray() 获取结构化数据，手动聚合目标字段值，再通过 $.param() 重新序列化。该方案健壮、可扩展，且不依赖 HTML 结构硬编码。
以下是优化后的完整 JavaScript 实现：
<script>
(function($) {
$(document).ready(function() {
$(document).on('submit', '#myform', function(e) {
e.preventDefault();
// 步骤1：获取表单所有字段的键值对数组
let data = $(this).serializeArray();
// 步骤2：提取所有 name="product-category" 的 value，合并为逗号字符串
const categoryValues = data
.filter(item => item.name === 'product-category')
.map(item => item.value);
const joinedCategories = categoryValues.length > 0
? categoryValues.join(',')
: '';
// 步骤3：过滤掉原始的 product-category 条目，并注入合并后的新条目
data = data
.filter(item => item.name !== 'product-category')
.concat(joinedCategories ? { name: 'product-category', value: joinedCategories } : []);
// 步骤4：重新序列化为标准 URL 查询字符串
const queryString = $.param(data);
console.log(queryString); // 输出示例：product-category=29,27&other-field=value
// 发起 AJAX 请求
$.ajax({
url: "<?php echo WC_AJAX::get_endpoint('kia_search'); ?>",
method: "POST",
data: queryString,
dataType: "html"
}).done(function(response) {
$('.products').html(response);
});
});
});
})(jQuery);✅ 关键优势说明：
- ✅ 语义清晰：serializeArray() 返回标准对象数组，便于函数式操作（filter/map/concat）；
- ✅ 健壮兼容：即使后续新增其他表单字段（如搜索关键词、价格范围等），逻辑无需修改；
- ✅ 空值安全：当未勾选任何分类时，product-category 字段自动被移除，避免传递空字符串或无效逗号；
- ✅ 服务端友好：PHP 端可直接使用 $_POST['product-category'] ?? ''，再 explode(',', $val) 转为数组处理。
⚠️ 注意事项：
- 确保每个复选框的 name 属性完全一致（区分大小写），且无多余空格；
- 若需支持中文或特殊字符，$.param() 默认已做 UTF-8 URL 编码，服务端 PHP 无需额外 urldecode()；
- 在 WordPress/WooCommerce 环境中，务必确保 WC_AJAX::get_endpoint() 返回的 URL 已正确注册并挂载对应 AJAX 处理钩子（如 wp_ajax_kia_search 和 wp_ajax_nopriv_kia_search）。
通过此方法，你既能保持前端代码的简洁性与可维护性，又能精准满足后端对多值参数的结构化接收需求。
