本文解决 jquery 中因重复 id 导致 ajax 仅获取首个候选人数据的问题，通过改用 class 选择器、批量请求或单次返回数组的方式，实现对多个候选人（如总统候选人）的票数准确异步加载与显示。
在使用 jQuery + PHP 构建动态投票结果展示页时，一个常见却隐蔽的错误是：在循环生成 HTML 元素时重复使用相同的 id 属性（如 id="contestname" 和 id="precount"）。由于 HTML 规范要求 id 必须全局唯一，jQuery 的 $('#contestname') 永远只匹配第一个元素，导致后续候选人信息无法读取——这正是你仅看到首位候选人票数、其余空白的根本原因。
✅ 正确做法：用 class 替代 id，批量处理
首先，修改 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；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']，查询数据库并按顺序返回同长度数组：
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
<?php
header('Content-Type: application/json; charset=utf-8');
require 'db.php'; // 你的数据库连接
if (!isset($_POST['names']) || !is_array($_POST['names'])) {
echo json_encode([]);
exit;
}
$names = array_map(function($n) use ($conn) {
return mysqli_real_escape_string($conn, trim($n));
}, $_POST['names']);
// 构建 IN 查询（注意：需确保姓名无注入风险，此处已转义）
$placeholders = str_repeat('?,', count($names) - 1) . '?';
$stmt = $conn->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 或预处理语句）。
遵循以上实践，即可稳定、高效地展示多位候选人的实时得票结果。
