PHP生成的Select标签通过AJAX POST传值至同文件PHP失败求助

嘿，我来帮你搞定这两个报错问题！先看看你遇到的两个核心错误：

• 控制台提示Uncaught ReferenceError: data is not defined
• PHP报错Undefined index: value

咱们一步步来修正：

1. 先解决JS里的data未定义问题 #

你的AJAX成功回调里写了alert(data)，但根本没把服务器返回的data作为参数传给回调函数！正确的写法是给success函数加上参数：

success: function(data) { alert(data); },

2. 修复jQuery事件绑定的低级错误 #

你写的$('#percents').change(pass_the_value());这里踩了个小坑：加括号会立刻执行这个函数，而不是把它绑定成change事件的回调。应该改成不带括号的形式：

$('#percents').change(pass_the_value);

另外，你已经用jQuery绑定了change事件，select标签里的onchange='pass_the_value()'完全可以删掉，避免重复触发事件哦。

3. 别忘了引入jQuery库！ #

你的代码里没写jQuery的引入语句，这会直接导致$未定义（虽然你没提这个错误，但这是必现的）。在你的自定义script标签之前加上：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

如果是本地开发环境，也可以用本地下载的jQuery文件路径。

4. 给AJAX指定明确的提交URL（可选但更稳妥） #

虽然AJAX默认会提交到当前页面，但有时候因为环境配置问题，可能导致参数传递失败，所以最好明确指定URL：

url: window.location.href,

或者直接写当前文件名，比如url: 'index.php',

修复后的完整代码 #

<?php 
if (isset($_POST['value'])) { 
    $selected_option = $_POST['value']; 
    echo $selected_option; 
    exit; 
} 
?>
<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() { 
    $('#percents').change(pass_the_value); 
});
function pass_the_value() {
    var selected = $('#percents').val();
    $.ajax({
        type: 'POST',
        url: window.location.href, // 明确指定提交地址
        data: { value: selected },
        success: function(data) { // 接收服务器返回的data
            alert(data); 
        },
        error: function() { 
            alert('failure'); 
        }
    });
}
</script>
<div>
<select name='percents' id='percents'>
<option value="0.1" selected="selected">10%</option>
<?php
// 示例数组
$products = array( "0.2" => "20%", "0.3" => "30%", "0.4" => "40%", "0.5" => "50%", "0.6" => "60%", "0.7" => "70%" );
foreach ($products as $key => $item) { 
    echo "<option value='{$key}'>$item</option>"; 
}
?>
</select>
</div>

额外小提示 #

当你切换下拉选项时，AJAX会把选中的值POST到当前PHP文件，PHP接收到后直接输出该值，AJAX的success回调就会弹出这个值。如果你需要把这个值展示在页面上，比如插入到某个div里，可以把alert(data)改成$('#result').text(data);，记得页面上要加个<div id="result"></div>哦。

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