多个相同下拉选择框复用同一AJAX查询数据库的实现咨询
解决方案
你完全不需要重复编写多份相同逻辑,只需要修正现有代码的两处核心错误,就能实现所有下拉框共用同一套查询逻辑:
- 原JS代码的事件绑定语法错误,
on方法的括号闭合位置不对 - AJAX成功回调里的
this指向发生了变化,不再指向触发事件的下拉框
修改后的代码
1. js/ajax.js 修正版
// 直接用类选择器.player绑定所有下拉框的change事件 $(".player").on("change", function() { // 先把当前触发事件的下拉框存为变量,避免回调里this指向偏移 const $currentSelect = $(this); const selectedName = $currentSelect.val(); $.ajax({ url: "../showvalue.php", method: "POST", data: { id: selectedName }, success: function(data) { // 用提前存好的当前下拉框变量找对应的value展示单元格 $currentSelect.closest("td").next(".value").html(data); } }); });
2. selectplayer.php 优化版(可选,避免重复写HTML和查询逻辑)
你可以用循环直接输出多个下拉框,不用手动复制10次代码:
<?php // 先统一查一次玩家列表,不用每次下拉框都查一次 $sql = "SELECT * FROM players ORDER BY value DESC"; $result = mysqli_query($conn, $sql); $players = []; if (mysqli_num_rows($result) > 0) { while ($row = mysqli_fetch_assoc($result)) { $players[] = $row; } } // 循环输出10个玩家选择行 for ($i = 1; $i <= 10; $i++) { ?> <tr> <td style="width:50%;"> <select name="player<?php echo $i; ?>" class="player"> <option disabled selected value></option> <?php foreach ($players as $p) { ?> <option value="<?php echo htmlspecialchars($p['playername']); ?>"> <?php echo htmlspecialchars($p['playername']); ?> </option> <?php } ?> </select> </td> <td style="width:50%;" class="value"></td> </tr> <?php } ?>
3. showvalue.php 安全优化版(修复SQL注入风险)
<?php // ...数据库连接代码... $pl = trim($_POST['id'] ?? ''); if (!empty($pl)) { // 使用预处理语句避免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); if ($row = mysqli_fetch_assoc($result)) { echo htmlspecialchars($row['value']); } mysqli_stmt_close($stmt); } ?>
内容的提问来源于stack exchange,提问作者Matt Drake
相关产品推荐
相关产品推荐

