本文详解因 html id 重复导致 jquery 仅获取首个候选人数据的问题，提供基于 class 的批量选择、并行 ajax 请求及动态结果渲染的完整解决方案。
在使用 jQuery + Ajax 动态加载多个候选人得票数时，一个常见却极易被忽视的错误是：在 PHP 循环中为多个元素重复使用相同的 id="contestname" 和 id="precount"。HTML 规范要求 id 属性必须全局唯一，而 jQuery 的 $('#contestname') 仅匹配第一个匹配元素——这正是你只看到第一位候选人姓名和票数、其余完全不显示的根本原因。
✅ 正确做法：改用 class + 批量处理
首先，在 index.php 中将 id 替换为语义化 class，确保每个候选人区块结构一致：
<h4 class="header-title mb-3">Presidential Result</h4>
<div class="">
<div class="row text-center">
<?php
$sql = "SELECT * FROM contestants WHERE post='president'";
$query = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($query)) {
?>
<div class="col-md-6">
<p class="text-muted mb-0 mt-3 contestname"><?php echo htmlspecialchars($row['fullname']); ?></p>
<h2 class="fw-normal mb-3 precount"></h2>
</div>
<?php } ?>
</div>
</div>? 注意：使用 htmlspecialchars() 防止 XSS，增强安全性。
? JavaScript 改写：批量采集 + 并行请求
在 Query.js 中，不再依赖单一 ID，而是通过 class 获取所有候选人姓名，并为每位候选人发起独立 Ajax 请求（或一次性请求后服务端返回数组）：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
方案一：客户端并行请求（推荐用于逻辑简单、数据量小场景）
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 标准的多候选人实时票数展示系统——不仅解决当前问题，也为后续增加副总统、部长等职位结果打下坚实基础。
