通过Ajax将JS多选下拉框变量传至PHP时遇未定义索引问题排查

你遇到的问题核心是同时发起了两个完全独立的POST请求，导致表单提交时并没有携带testVariable参数：

1. 第一个是你写的AJAX请求，确实携带了testVariable，这也是你在success回调里能通过alert(data)拿到正确值的原因；
2. 第二个是你调用$("#multiple_select_form").submit()触发的常规表单提交，这个请求里完全没有testVariable参数——而你最终看到的是表单提交后加载的displayData.php页面，所以才会报Undefined index: testVariable错误。

下面给你两种针对性的解决方案，根据你的需求二选一即可：

方案一：只用AJAX处理（无页面跳转） #

如果你希望通过AJAX异步获取结果，不需要跳转到displayData.php页面，直接去掉表单提交的代码即可：

$('#btn-get').on('click', function() {
    var selectedOptions = [];
    $.each($(".selectpicker option:selected"), function(){
        selectedOptions.push("[" + $(this).val() + "]");
    });
    var myVar = selectedOptions.join(",");
    $.ajax({
        type: "POST",
        url: 'displayData.php',
        data: { testVariable : myVar },
        success: function(data) {
            alert(data);
            // 可选：如果需要把结果展示在当前页面，可以在这里操作DOM
            // 例如：$(".container").append("<div class='mt-3'>选中值：" + data + "</div>");
        }
    });
    // 移除这行代码，它是问题的根源
    // $("#multiple_select_form").submit();
});

方案二：只用表单提交（页面跳转） #

如果你希望跳转到displayData.php页面展示结果，就不需要AJAX，而是把选中的变量存入表单的隐藏字段，让表单提交时自动携带这个参数：

第一步：修改HTML表单，添加隐藏字段 #

<form method="post" action="displayData.php" id="multiple_select_form">
    <select name="columns" id="columns" class="form-control selectpicker" multiple>
        <option value="Country">Country</option>
        <option value="Customer Name">Customer Name</option>
        <option value="Order Date">Order Date</option>
        <option value="Address">Address</option>
    </select>
    <!-- 新增隐藏输入框，用于存储拼接后的选中值 -->
    <input type="hidden" name="testVariable" id="testVariable">
</form>

第二步：修改JS代码，赋值后提交表单 #

$('#btn-get').on('click', function() {
    var selectedOptions = [];
    $.each($(".selectpicker option:selected"), function(){
        selectedOptions.push("[" + $(this).val() + "]");
    });
    var myVar = selectedOptions.join(",");
    // 把拼接好的值存入隐藏字段
    $("#testVariable").val(myVar);
    // 提交表单，此时testVariable会被一起发送到displayData.php
    $("#multiple_select_form").submit();
});

这样修改后，displayData.php里的$_POST['testVariable']就能正常获取到值了。

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