如何使用 jQuery Ajax 正确循环请求多个候选人票数_技术教程

本文详解因 html id 重复导致 jquery 仅获取首个候选人数据的问题，提供基于 class 的批量选择、并行 ajax 请求及动态结果渲染的完整解决方案。

在使用 jQuery + Ajax 动态加载多个候选人得票数时，一个常见却极易被忽视的错误是：在 PHP 循环中为多个元素重复使用相同的 id="contestname" 和 id="precount"。HTML 规范要求 id 属性必须全局唯一，而 jQuery 的 $('#contestname') 仅匹配第一个匹配元素——这正是你只看到第一位候选人姓名和票数、其余完全不显示的根本原因。

✅ 正确做法：改用 class + 批量处理

首先，在 index.php 中将 id 替换为语义化 class，确保每个候选人区块结构一致：

Presidential Result

? 注意：使用 htmlspecialchars() 防止 XSS，增强安全性。

? JavaScript 改写：批量采集 + 并行请求

在 Query.js 中，不再依赖单一 ID，而是通过 class 获取所有候选人姓名，并为每位候选人发起独立 Ajax 请求（或一次性请求后服务端返回数组）：

方案一：客户端并行请求（推荐用于逻辑简单、数据量小场景）

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

  // 为每位候选人发起独立请求
  names.forEach((name, index) => {
    $.ajax({
      url: 'prescount.php',
      method: 'POST',
      data: { present: name },
      dataType: 'json', // 自动解析 JSON，无需 $.parseJSON
      success: function(data) {
        // 安全写入对应位置的 precount 元素
        $('.precount').eq(index).html(data.html || '0');
      },
      error: function() {
        $('.precount').eq(index).html('—');
      }
    });
  });
}

方案二：服务端聚合返回（更高效，推荐用于生产环境）

修改 prescount.php，接收空参数或统一标识，查询全部总统候选人票数并返回 JSON 数组：

// prescount.php
require_once 'db.php'; // 确保数据库连接可用
$sql = "SELECT c.fullname, COALESCE(SUM(v.vote), 0) as total 
        FROM contestants c 
        LEFT JOIN votes v ON c.id = v.contestant_id AND v.post = 'president'
        WHERE c.post = 'president'
        GROUP BY c.id, c.fullname
        ORDER BY c.id";
$result = mysqli_query($conn, $sql);

$data = [];
while ($row = mysqli_fetch_assoc($result)) {
  $data[] = ['name' => $row['fullname'], 'html' => (int)$row['total']];
}
echo json_encode($data);

前端 JS 调整为单次请求 + 遍历赋值：

function view_pres_count() {
  $.ajax({
    url: 'prescount.php',
    method: 'POST',
    dataType: 'json',
    success: function(data) {
      // 确保 data 是数组且长度匹配
      if (Array.isArray(data) && data.length > 0) {
        $('.precount').each(function(i) {
          const vote = data[i] ? data[i].html : 0;
          $(this).html(vote);
        });
      }
    },
    error: function() {
      $('.precount').html('Error');
    }
  });
}

⚠️ 关键注意事项

❌ 禁止在循环中重复使用相同 id；✅ 始终用 class 表达“一类元素”。
✅ 使用 .eq(index) 或 $('.selector')[i] 精准定位 DOM 节点，避免污染。
✅ 设置 dataType: 'json' 让 jQuery 自动解析，比手动 $.parseJSON() 更安全。
✅ 后端返回前务必校验数据完整性（如 COALESCE 处理 NULL 投票数），前端做好兜底（如 data[i]?.html || '0'）。
✅ 首次加载建议在 DOM Ready 后自动调用 view_pres_count()，例如：
```
$(document).ready(function() {
  view_pres_count();
});
```

通过以上重构，你将获得可扩展、健壮且符合 Web 标准的多候选人实时票数展示系统——不仅解决当前问题，也为后续增加副总统、部长等职位结果打下坚实基础。