2026-01-17 如何通过 AJAX 获取点击 div 元素的自定义 value 值 技术 EthanWu html 的 ` ` 标签原生不支持 `value` 属性,但可通过 `attr(‘value’)` 读取其自定义属性值,并结合 jquery ajax 正确传递至 php 后端处理。 在 Web 开发中,开发者常希望为非表单元素(如 )附加数据以便交互使用。虽然 没有标准 value 属性(该属性仅适用于 、 等表单控件),但 HTML5 允许添加任意自定义属性(推荐使用 data-* 命名规范)。若仍沿用 value=”1″ 这类非标准写法,则必须通过 .attr(‘value’) 显式获取,而非 .val()(后者仅对表单元素有效)。 ✅ 正确做法如下: HTML 中建议改用语义化 data 属性(更规范、可维护性更强): 点击获取信息 JavaScript 中使用 .data() 或 .attr() 读取(注意区别): PaperAiBye 支持近30多种语言降ai降重,并且支持多种语言免费测句子的ai率,支持英文aigc报告等 下载 .data(‘classInfo’):自动转换类型(如 “1” → 1),且支持驼峰命名; .attr(‘data-class-info’):原样返回字符串 “1”,适合严格类型控制。 推荐使用 .data(),代码更健壮: function caller() { const classValue = $('#Class').data('classInfo'); // 返回数字 1 $.ajax({ url: 'test.php', type: 'GET', data: { Class_info: classValue }, success: function(data) { $('#Result').text(data); console.log('后端返回:', data); }, error: function(xhr) { console.error('AJAX 请求失败:', xhr.status, xhr.statusText); } }); } PHP 后端保持简洁安全(需基础校验): ⚠️ 注意事项: 避免在 HTML 中滥用非标准属性(如 value),易引发兼容性或语义问题; 使用 data-* 属性是 W3C 推荐方案,同时支持 jQuery .data() 方法的智能解析; .val() 对 永远返回 undefined,务必改用 .attr() 或 .data(); 实际项目中建议将事件绑定改为委托方式(如 $(‘#Class’).on(‘click’, caller)),避免内联 onclick,提升可维护性与安全性。 总结: 不具备 value 属性,读取自定义值请用 .attr(‘xxx’) 或更优的 .data(‘xxx’);AJAX 调用本身无误,关键在于前端数据采集方式是否准确。 https://www.php.cn/faq/1993212.html