PHP级联下拉+技能复选框多选值逗号分隔入库问题修复

• 复选框设置了name='skills[]'，表单提交后后端接收到的$_POST['skills']是数组类型，直接将数组传入PDO预处理语句绑定varchar类型字段，会触发类型匹配错误，导致数据插入失败
• 现有insert.php逻辑存在语法错误：INSERT写入操作不需要调用fetchAll()方法，该方法仅用于SELECT查询的结果集读取，此处调用会抛出异常
• 前端提交校验未覆盖skills复选框，用户未选中任何技能时会提交空值，触发数据库非空约束报错
• AJAX提交成功回调中错误重复设置提交按钮为禁用状态，会导致一次提交后按钮无法再次点击

1. 后端接收skills参数时增加类型判断，使用implode()函数将选中值数组转换为逗号分隔的字符串，未选中时赋值为空字符串作为默认值
2. 移除INSERT操作后的fetchAll()调用，直接判断execute()方法的返回结果作为操作成功/失败的依据
3. 前端表单提交校验增加skills选中状态判断，避免空值提交
4. 修正AJAX回调里的按钮状态逻辑，提交完成后恢复按钮可点击状态
5. 清理index.php中冗余的无效PHP代码块（AJAX提交不会触发页面刷新，表单中嵌套的POST遍历逻辑永远不会执行）

insert.php（核心插入逻辑修正） #

<?php
//insert.php

if(isset($_POST['country']))
{
    include('database_connection.php');
    
    // 处理skills复选框数组，转逗号分隔字符串
    $skills = '';
    if(isset($_POST['skills']) && is_array($_POST['skills'])){
        // 过滤每个选项的首尾空格，避免存入多余字符
        $skills = implode(',', array_map('trim', $_POST['skills']));
    }

    $query = "
    INSERT INTO country_state_city_form_data (country, state, city, skills) 
    VALUES(:country, :state, :city, :skills)
    ";
    $statement = $connect->prepare($query);
    // 直接获取执行结果
    $execute_result = $statement->execute(
        array(
            ':country'      =>  trim($_POST['country']),
            ':state'        =>  trim($_POST['state']),
            ':city'         =>  trim($_POST['hidden_city']),
            ':skills'       =>  $skills,
        )
    );

    echo $execute_result ? 'done' : 'error';
}

?>

index.php（前端校验与交互修正） #

找到JS代码中的表单提交事件，替换为以下逻辑：

$('#insert_data').on('submit', function(event){
    event.preventDefault();
    if($('#country').val() == '')
    {
        alert("请选择国家");
        return false;
    }
    else if($('#state').val() == '')
    {
        alert("请选择州/省");
        return false;
    }
    else if($('#city').val() == '')
    {
        alert("请选择城市");
        return false;
    }
    // 新增技能复选框校验
    else if($('input[name="skills[]"]:checked').length == 0)
    {
        alert("请至少选择一项技能");
        return false;
    }
    else
    {
        $('#hidden_city').val($('#city').val());
        $('#action').attr('disabled', 'disabled');
        var form_data = $(this).serialize();
        $.ajax({
            url:"insert.php",
            method:"POST",
            data:form_data,
            success:function(data)
            {
                // 提交完成后恢复按钮可点击
                $('#action').removeAttr("disabled");
                if(data == 'done')
                {
                    $('#city').html('');
                    $('#city').data('plugin_lwMultiSelect').updateList();
                    $('#city').data('plugin_lwMultiSelect').removeAll();
                    $('#insert_data')[0].reset();
                    alert('数据插入成功');
                }else{
                    alert('数据插入失败，请重试');
                }
            }
        });
    }
});

同时可以删除表单中以下冗余代码块：

<?php
if(isset($_POST['submit'])){
if(!empty($_POST['skills'])) {
    foreach($_POST['skills'] as $value){
    echo "value : ".$value.'<br/>';
}
}
}
?>

注：如果后续需要读取skills字段展示，直接用explode(',', $skills_str)即可把逗号分隔的字符串转回数组使用。

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