如何使用 jQuery Ajax 正确循环获取多个候选人的票数结果

本文解决 jquery 中因重复 id 导致 ajax 仅获取首个候选人数据的问题，通过改用 class 选择器、批量请求或单次返回数组的方式，实现对多个候选人（如总统候选人）的票数准确异步加载与显示。

在使用 jQuery + PHP 构建动态投票结果展示页时，一个常见却隐蔽的错误是：在循环生成 HTML 元素时重复使用相同的 id 属性（如 id="contestname" 和 id="precount"）。由于 HTML 规范要求 id 必须全局唯一，jQuery 的 $('#contestname') 永远只匹配第一个元素，导致后续候选人信息无法读取——这正是你仅看到首位候选人票数、其余空白的根本原因。

✅ 正确做法：用 class 替代 id，批量处理

首先，修改 index.php 中的循环输出，将 id 改为语义化 class，并确保每个候选人区块结构一致：

Presidential Result

  
    
      
        

        

      
    
  

⚠️ 注意：使用 htmlspecialchars() 防止 XSS；contestname 和 precount 均为 class，可被多个元素共享。

? JavaScript：批量获取姓名，并统一请求或逐个更新

方案一（推荐）：单次请求，后端返回结构化数组（高效、减少请求次数）

修改 Query.js，一次性收集所有候选人姓名，发起一次 Ajax 请求：

function view_pres_count() {
  // 获取所有候选人姓名（去空格、去重可选）
  const names = $('.contestname').map(function() {
    return $(this).text().trim();
  }).get();

  if (names.length === 0) return;

  $.ajax({
    url: 'prescount.php',
    method: 'POST',
    dataType: 'json', // 自动解析 JSON，无需 $.parseJSON
    data: { names: names }, // 传数组：{names: ["Jimmy Carter", "Ulysses Grant"]}
    success: function(data) {
      // data 应为形如 [{html: "1245"}, {html: "987"}] 的数组
      $('.precount').each(function(index) {
        $(this).html(data[index]?.html || '0');
      });
    },
    error: function() {
      console.error('Failed to load vote counts.');
      $('.precount').text('—');
    }
  });
}

对应地，prescount.php 需接收 $_POST['names']，查询数据库并按顺序返回同长度数组：

prepare("SELECT fullname, COUNT(*) as votes FROM votes v 
                         JOIN contestants c ON v.contestant_id = c.id 
                         WHERE c.fullname IN ($placeholders) AND c.post = 'president' 
                         GROUP BY c.fullname");

// 绑定参数（PHP 8.1+ 可用 ...$names）
$types = str_repeat('s', count($names));
$stmt->bind_param($types, ...$names);
$stmt->execute();
$result = $stmt->get_result();

// 构建按输入顺序排列的结果数组
$nameToVotes = [];
while ($row = $result->fetch_assoc()) {
  $nameToVotes[$row['fullname']] = (int)$row['votes'];
}

// 按前端传入顺序填充响应
$response = [];
foreach ($_POST['names'] as $name) {
  $response[] = ['html' => $nameToVotes[$name] ?? '0'];
}

echo json_encode($response);
?>

方案二：逐个请求（仅适用于候选人极少且无性能要求场景）

若坚持为每人发一次请求，需用 .each() 遍历并闭包保存索引：

function view_pres_count() {
  $('.contestname').each(function(index) {
    const name = $(this).text().trim();
    $.ajax({
      url: 'prescount.php',
      method: 'POST',
      data: { present: name },
      dataType: 'json',
      success: function(data) {
        $('.precount').eq(index).html(data.html || '0');
      }
    });
  });
}

❗ 不推荐：N 个候选人 → N 次 HTTP 请求，易触发并发限制、延迟叠加、服务器压力大。

✅ 最终调用建议

在 DOM 加载完成后初始化数据（例如放在 $(document).ready(...) 内）：

$(document).ready(function() {
  view_pres_count(); // 首次加载
  // 可选：每 10 秒刷新一次
  // setInterval(view_pres_count, 10000);
});

? 总结

• 永远避免在循环中重复使用 id —— 这是 jQuery 选择器失效的根源；
• 使用 class + .map().get() 批量提取数据，语义清晰且兼容性强；
• 优先采用「单次请求 + 结构化返回」方案，兼顾性能、可维护性与健壮性；
• 后端需严格按前端传入顺序组织响应，确保 DOM 更新一一对应；
• 始终对用户输入和数据库输出做安全过滤（htmlspecialchars, mysqli_real_escape_string 或预处理语句）。

遵循以上实践，即可稳定、高效地展示多位候选人的实时得票结果。