多Ajax请求实现球员数值求和无返回值问题如何解决

核心错误点 #

• 请求方式不匹配：AJAX使用GET方法提交参数，但showvalue.php中使用$_POST接收参数，导致无法拿到传入的球员名和总数值，请求无返回。
• 非表单元素取值错误：total是<th>标签，不属于表单输入元素，不存在value属性，使用.value获取到的是undefined，数值计算逻辑直接失效。
• AJAX参数拼写错误：jQuery AJAX的dataType参数首字母T需要大写，小写的datatype不会触发自动JSON解析，返回的字符串无法直接作为对象读取属性。
• 累加逻辑错误：当前逻辑是在旧总数值基础上叠加新选中球员的价值，如果用户修改已选的球员，会出现重复累加、数值计算错误的问题（例如把价值10的球员改成价值5的球员，总数值会变成10+5=15而非正确的5）。
• 存在SQL注入风险：showvalue.php直接拼接用户传入的参数到SQL语句中，未做任何防护，存在数据库被攻击的风险。
• 代码冗余：10个球员要写10个几乎完全相同的JS函数和HTML片段，后续维护成本极高。

修复代码 #

1. 重构select-player.php #

不用重复写10次下拉框代码，用循环批量输出：

<!-- 批量输出10个球员选择行 -->
<?php for ($i=1; $i<=10; $i++) { ?>
<tr>
  <td style="width:50%;">
      <select name="player<?php echo $i; ?>" id="player<?php echo $i; ?>" onchange="showValue(<?php echo $i; ?>)">
          <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='". htmlspecialchars($row['playername']) ."'>" .$row['playername'] ."</option>";
              }
          }
          ?>
      </select>
  </td>
  <td style="width:50%;" id="value<?php echo $i; ?>"></td>
</tr>
<?php } ?>
<tr>
  <th style="width:50%;">Total</th>
  <th style="width:50%;" id="total">0</th>
</tr>

2. 重构ajax.js #

统一使用一个处理函数，修正请求和计算逻辑：

function showValue(index) {
    const playerName = document.getElementById(`player${index}`).value;
    $.ajax({
        url: "../showvalue.php",
        method: "POST",
        dataType: "json",
        data: {
            id: playerName
        },
        success: function(data) {
            // 先更新当前选中球员的价值
            $(`#value${index}`).text(data.price);
            // 重新计算所有已选球员的总价值，避免修改已选球员时计算错误
            let total = 0;
            for (let i=1; i<=10; i++) {
                const val = $(`#value${i}`).text();
                if (val) total += parseFloat(val);
            }
            $("#total").text(total);
        }
    })
}

3. 修复showvalue.php #

修正参数接收逻辑，增加SQL注入防护，指定JSON返回头：

<?php
include_once 'includes/dbh.inc.php';
// 设置JSON返回头，确保前端能正确解析
header('Content-Type: application/json');

$pl = trim($_POST['id'] ?? '');
if (empty($pl)) {
    echo json_encode(['price' => 0]);
    exit;
}

// 使用预处理语句防止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);

$value = 0;
if ($row = mysqli_fetch_assoc($result)) {
    $value = $row['value'];
}
echo json_encode(['price' => $value]);
?>

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