应使用JSON字符串化后传入data属性:在HTML中用单引号包裹data-attr='{}',JavaScript中通过dataset获取并JSON.parse()解析为空对象。

如果您在HTML中需要向JavaScript函数或后端接口传递一个空对象作为参数,但发现直接使用空对象字面量或未定义值导致解析异常或类型错误,则可能是由于HTML属性值限制、字符串化缺失或上下文执行环境不支持对象字面量。以下是实现该目标的多种方法:
一、使用JSON字符串化后传入data属性
HTML标签不支持直接嵌入JavaScript对象字面量,但可通过自定义data属性传递JSON格式字符串,再在JavaScript中解析为对象。此方式语义清晰且兼容性好。
1、在HTML元素中添加data属性,值为JSON字符串{},注意需用单引号包裹整个属性值以避免双引号冲突。
2、编写内联或外部JavaScript代码,通过dataset获取该属性值。
立即学习“前端免费学习笔记(深入)”;
3、调用JSON.parse()将字符串转换为真正的空对象。
二、通过onclick等事件属性内联调用并构造空对象
在事件处理属性中可直接书写JavaScript表达式,利用函数调用时传入字面量{},绕过HTML属性值解析限制。
1、为按钮或其他可交互元素添加onclick属性。
2、在属性值中调用目标函数,并显式传入{}作为参数。
3、确保目标函数已声明且可被全局访问。
三、使用隐藏input字段存储空对象序列化值
表单场景下,可通过input[type="hidden"]提交空对象的JSON字符串,后端接收后解析。此法适用于表单提交路径,避免前端动态构造对象的时机问题。
1、在form标签内插入input元素,设置type="hidden"与name属性。
2、将value设为{}的字符串形式,即value="{}"。
3、提交表单时,该字段会以键值对形式发送,服务端按约定解析为对象。
四、通过URL查询参数传递空对象标识符
当需通过链接跳转触发空对象逻辑时,不宜直接在URL中写{}(非法字符且无意义),应采用约定标识符代替,如empty_obj=1,由接收方识别后生成空对象。
1、构造超链接,href中包含语义化参数,例如?action=init&payload=empty。
2、目标页面JavaScript监听URL搜索参数,检测到payload=empty时初始化const obj = {};。
3、后续逻辑统一使用该变量,避免硬编码或重复判断。
五、使用HTML自定义元素配合属性反射机制
现代浏览器支持自定义元素,可通过attributeChangedCallback监听属性变更,将特定属性值(如obj="")自动映射为空对象,实现声明式传参。
1、定义一个继承HTMLElement的类,并注册为自定义标签,例如。
2、在observedAttributes中声明obj属性。
3、当HTML中写入时,回调中返回{}(空对象)并赋值给实例属性。











