如何通过 AJAX 获取被点击 div 元素的自定义 value 值

聖光之護 2026-01-17 00:00:00 次阅读

本文详解为何 `

` 无法直接用 `.val()` 获取 `value` 属性，以及如何正确使用 `.attr('value')` 配合 ajax 将自定义值传至 php 后端并返回结果。

在 HTML 中，

是通用容器元素，原生不支持 value 属性（该属性仅对表单控件如、

等有效）。因此，当你为 设置 value="1" 时，它属于自定义属性（即 data attribute 的非标准写法），不能通过 jQuery 的 .val() 方法读取——该方法专用于表单元素的值获取，对 返回 undefined，导致 AJAX 请求发送空值或 null。✅ 正确做法是使用 .att<img src="//public-space.oss-cn-hongkong.aliyucs.com/gz/078.jpg" />r('value') 显式读取该 HTML 属性：<pre class="brush:php;toolbar:false;">点击获取值

</pre>⚠️ 注意事项：
<ul><li>*推荐使用标准 `data-属性替代非标准value**：更语义化且符合 HTML5 规范。例如改写为，然后用.data('value')读取（注意：.data()会自动转换类型，首次调用后缓存值；若需始终读取原始 HTML 属性，仍用.attr('data-value')`）。<li>
PHP 端务必做基础校验：test.php 应增加参数过滤与默认值处理，避免空值或恶意输入：</li><pre class="brush:php;toolbar:false;"><?php
// test.php
$a = isset($_GET['Class_info']) ? trim((string)$_GET['Class_info']) : 'no_value';
echo htmlspecialchars($a, ENT_QUOTES, 'UTF-8');
?></pre><ul><li>
事件绑定建议升级：避免内联 onclick，改用事件委托提升可维护性：</li></ul><pre class="brush:php;toolbar:false;">$(document).on('click', '#Class', function() {
 const val = $(this).attr('value'); // this 指向被点击的 div
 // ... AJAX 调用
});</pre>总结：
 的自定义属性必须用 .attr() 读取；.val() 仅适用于表单元素；结合 data-* 属性与合理服务端防护，可构建健壮、可扩展的前端交互逻辑。

</li></ul>