HTML 元素 ID 必须唯一，重复 ID 会导致 getElementById() 仅绑定首个元素；应改用 class 并通过循环为每个按钮单独绑定事件监听器，确保每个按钮都能正确触发独立的 AJAX 请求。
html 元素 id 必须唯一，重复 id 会导致 `getelementbyid()` 仅绑定首个元素；应改用 class 并通过循环为每个按钮单独绑定事件监听器，确保每个按钮都能正确触发独立的 ajax 请求。
在 Web 开发中，尤其是使用 Django 模板动态渲染按钮列表时，一个常见误区是为多个按钮分配相同的 id 属性（如 id="NotifyBtn"）。HTML 规范明确要求 id 在整个文档中必须唯一。当 JavaScript 执行 document.getElementById("NotifyBtn") 时，浏览器只会返回第一个匹配的元素，后续按钮将完全无法响应点击事件——这正是你遇到“仅一个按钮生效”的根本原因。
✅ 正确做法：用 class 替代 id，并批量绑定事件监听器
首先，修改 Django 模板中的按钮结构，将 id 改为语义化 class，同时保留自定义属性（如 name 和 town）用于传递数据：
{% for person in page_obj %}
<button class="notify-btn"
data-name="{{ person.FName }}"
data-town="{{ person.LName }}">
Press Me
</button>
{% endfor %}✅ 推荐使用
data-*属性（如data-name,data-town）替代非标准属性（如name、town），符合 HTML5 规范，语义清晰且便于维护。立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
接着，在 JavaScript 中获取所有同类按钮，并为每个按钮独立添加点击事件监听器：
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.notify-btn');
buttons.forEach(button => {
button.addEventListener('click', function() {
const name = this.dataset.name; // 自动解析 data-name
const town = this.dataset.town; // 自动解析 data-town
fetch("{% url 'alert_via_JSON_Response' %}", {
method: "POST",
headers: {
"X-CSRFToken": "{{ csrf_token }}",
"Content-Type": "application/json"
},
body: JSON.stringify({
message: `Hi there: ${name} born in ${town}`
})
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
alert(data.status);
})
.catch(error => {
console.error("Fetch error:", error);
alert("Failed to send notification.");
});
});
});
});? 关键优化说明：
- 使用
document.querySelectorAll()+forEach()替代getElementsByClassName()+for循环，代码更简洁、现代且兼容性良好； - 利用
this.dataset.*直接读取data-*属性，无需getAttribute()，更安全高效； - 添加
DOMContentLoaded确保 DOM 加载完成后再执行脚本，避免元素未就绪导致绑定失败； - 增加
fetch错误处理（.catch()），提升用户体验与调试能力。
⚠️ 注意事项：
- 切勿在模板中重复使用
id—— 即使 Django 循环生成，也应避免； - 若需后端精准识别按钮来源，建议在
body中额外传入唯一标识（如person.id），而非仅依赖前端属性； - 生产环境建议将 CSRF Token 提取为全局变量或从 meta 标签读取，避免模板硬编码泄露风险。
通过以上重构，每个按钮均能独立触发请求，携带各自 name 与 town 数据，后端 alert_via_JSON_Response 视图亦可稳定接收并返回对应响应，彻底解决多按钮单点失效问题。
