如何将下拉框选中值作为WHERE条件查询数据库及代码复用问题

编辑补充 #

我有一个包含球员列表的下拉框，希望选中某个球员时展示该球员的对应数值。我对JS和Ajax较为陌生，勉强拼凑了如下代码，目前选中下拉值后没有任何内容显示。
感谢@brombeer提供的解答。
如果我有10个同类型的下拉框，能不能复用同一份ajax.js和showvalue.php，还是需要为每个下拉框单独创建对应文件？

selectplayer.php 代码 #

<tbody>
  <tr>
    <td style="width:50%;">
        <select name="player1" id="player" onchange="showvalue()">
            <option disabled selected value></option>
            <?php
                $sql = "SELECT * FROM players ORDER BY value DESC";
                $result = mysqli_query($conn, $sql);
                $resultCheck = mysqli_num_rows($result);
                    if ($resultCheck > 0) {
                        while ($row = mysqli_fetch_assoc($result)) {
                             echo "<option value='". $row['playername'] ."'>" .$row['playername'] ."</option>";
                        }
                    }
             ?>
        </select>
    </td>
    <td style="width:50%;" id="value">
    </td>
  </tr>

js/ajax.js 代码 #

function showvalue(){
    
    var x = document.getElementById("player").value;
    
    $.ajax({
        url:"../showvalue.php",
        method: "POST",
        data:{
            id : x
        },
        success:function(data){
            $("#value").html(data)
        }
    })
}

showvalue.php 代码 #

<?php
    ...db connection...
    $pl = $_POST['id'];
    $pl = trim($pl);
    $sql = "SELECT value FROM players WHERE playername='{$pl}'";
    $result = mysqli_query($conn, $sql);
    while($rows = mysqli_fetch_array($result)){
        echo $rows['value'];
    }
?>

现有代码无显示排查步骤 #

1. 确认页面已经引入jQuery库，$.ajax依赖jQuery运行，打开浏览器控制台（F12）如果出现$ is not defined报错，在页面<head>标签中添加jQuery引入即可：

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

2. 验证showvalue.php逻辑正常，可以手动模拟POST请求传入id参数，确认接口可以返回对应球员的数值，同时检查数据库连接配置是否正确。
3. 检查下拉框生成的option标签是否正确设置了value属性，可以通过浏览器元素审查功能确认。

多下拉框复用方案 #

10个同类型下拉框完全可以复用同一份ajax.js和showvalue.php，不需要单独创建文件，仅需做少量修改：

1. 给每个下拉框和对应的数值展示区域设置唯一的关联ID，比如第一个下拉框对应player1/value1，第二个对应player2/value2，以此类推，下拉框的onchange事件传入当前元素和对应的展示区域ID：

<!-- 第一个下拉框 -->
<select name="player1" id="player1" onchange="showvalue(this, 'value1')">
<!-- 选项内容省略 -->
</select>
<td style="width:50%;" id="value1"></td>

<!-- 第二个下拉框 -->
<select name="player2" id="player2" onchange="showvalue(this, 'value2')">
<!-- 选项内容省略 -->
</select>
<td style="width:50%;" id="value2"></td>

2. 修改ajax.js中的showvalue函数，适配动态传入的元素和目标ID：

function showvalue(selectEl, targetId){
    var playerName = selectEl.value;
    $.ajax({
        url:"../showvalue.php",
        method: "POST",
        data:{
            id : playerName
        },
        success:function(data){
            $("#"+targetId).html(data);
        }
    })
}

3. showvalue.php无需修改即可直接复用，建议额外添加SQL注入防护，改用预处理语句执行查询：

<?php
// ...数据库连接逻辑保持不变...
$pl = trim($_POST['id']);
// 预处理语句防止SQL注入
$stmt = mysqli_prepare($conn, "SELECT value FROM players WHERE playername=?");
mysqli_stmt_bind_param($stmt, "s", $pl);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while($rows = mysqli_fetch_array($result)){
    echo $rows['value'];
}
?>

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