如何通过PHP和AJAX将复选框选中值提交至独立页面？

嘿，我帮你搞定这个AJAX提交复选框选中值的问题，先说说原代码里的几个小问题，再给你修复好的完整方案：

原代码的问题点 #

• 函数名拼写错误：genereted 应该改成 generated
• 直接调用 data['selctednom'].push 但没初始化 data 对象，会触发「Cannot read properties of undefined」的报错
• 所有复选框用了重复的 id="selctednom"，HTML规范里id必须唯一，建议改用class来统一标记这类复选框
• 选择器可以更精准，避免误选其他类型的选中输入框

修复后的完整代码 #

HTML部分（修正复选框标记） #

把重复的id换成class，方便JS精准选择：

<td><input class="selected-nom" type="checkbox" value="<?php echo trim($row['test']); ?>" /></td>

JavaScript部分（修正AJAX逻辑） #

修正拼写错误、初始化数组，同时增加错误回调方便调试：

function generated(){ 
    // 初始化存放选中值的数组，用驼峰命名更符合JS编码习惯
    var selectedNom = []; 
    // 精准选择带有selected-nom类的选中复选框
    $("input.selected-nom:checked").each(function() { 
        selectedNom.push($(this).val()); 
    }); 

    $.ajax({ 
        type: "POST", 
        url: "bar.php", 
        dataType: 'json', 
        data: { selectedNom: selectedNom }, 
        success: function(response){ 
            console.log('提交成功', response);
            alert('ok');
        },
        // 增加错误回调，方便排查提交失败的问题
        error: function(xhr, status, error){
            console.error('提交失败原因:', error);
            alert('提交失败，请重试');
        }
    }); 
}

后端bar.php示例（接收并处理数据） #

处理前端提交的数组，返回JSON响应：

<?php
// 安全接收POST参数，避免未传参时的报错
$selectedNom = $_POST['selectedNom'] ?? [];

// 这里可以添加你的业务逻辑，比如存入数据库、数据计算等
// 示例：返回处理后的结果给前端
$response = [
    'status' => 'success',
    'selected_count' => count($selectedNom),
    'selected_values' => $selectedNom
];

// 设置响应头为JSON格式
header('Content-Type: application/json');
echo json_encode($response);
?>

额外小提示 #

• 变量名尽量用驼峰命名法（比如selectedNom），可读性更强
• 开发时多用console.log代替alert，调试信息更详细
• 后端一定要做参数校验，避免恶意请求影响业务

内容的提问来源于stack exchange，提问作者cte4 stack