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

2026-01-17

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

本文详解为何 `

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

在 HTML 中，

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

等有效）。因此，当你为 </p>
<div> 设置 value=”1″ 时，它属于自定义属性（即 data attribute 的非标准写法），不能通过 jQuery 的 .val() 方法读取——该方法专用于表单元素的值获取，对 </p>
<div> 返回 undefined，导致 AJAX 请求发送空值或 null。</p>
<p>✅ 正确做法是使用 .attr(‘value’) 显式读取该 HTML 属性：</p>
<pre class="brush:php;toolbar:false;"><div id="Class" class="Class_ticket" onclick="caller()" value="1">点击获取值</div>
<div id="Result"></div>

$.ajax({
    url: "test.php",
    type: "GET",
    data: { Class_info: divValue },
    success: function(data) {
      $('#Result').text(data);
      console.log('服务器响应：', data);
    },
    error: function(xhr, status, error) {
      $('#Result').text('请求失败：' + error);
      console.error('AJAX 错误：', error);
    }
  });
}
</script></pre>
<p>⚠️ 注意事项：</p>
<div class="aritcle_card flexRow">
<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="https://www.php.cn/ai/2309" title="PaperAiBye"><img
										src="https://img.php.cn/upload/ai_manual/001/246/273/175807921413165.png" alt="PaperAiBye"></a></p>
<div class="aritcle_card_info flexColumn">
									<a href="https://www.php.cn/ai/2309" title="PaperAiBye">PaperAiBye</a></p>
<p>支持近30多种语言降ai降重，并且支持多种语言免费测句子的ai率，支持英文aigc报告等</p>
</p></div>
<p>								<a href="https://www.php.cn/ai/2309" title="PaperAiBye" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
</p></div>
<ul>
<li>*<em>推荐使用标准 `data-</em>属性替代非标准value**：更语义化且符合 HTML5 规范。例如改写为
<div id="Class" data-value="1" onclick="caller()">，然后用.data(‘value’)读取（注意：.data()会自动转换类型，首次调用后缓存值；若需始终读取原始 HTML 属性，仍用.attr(‘data-value’)`）。</p>
<li>
<strong>PHP 端务必做基础校验</strong>：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>
<strong>事件绑定建议升级</strong>：避免内联 onclick，改用事件委托提升可维护性：</li>
</ul>
<pre class="brush:php;toolbar:false;">$(document).on('click', '#Class', function() {
  const val = $(this).attr('value'); // this 指向被点击的 div
  // ... AJAX 调用
});</pre>
<p>总结：</p>
<div> 的自定义属性必须用 .attr() 读取；.val() 仅适用于表单元素；结合 data-* 属性与合理服务端防护，可构建健壮、可扩展的<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>交互逻辑。</div>
</div>
</li>
</ul>
</div>
</div>
<p>

https://www.php.cn/faq/1993353.html

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

发表回复 取消回复

发表回复取消回复