如何正确将PHP JSON编码对象传入JavaScript方法？解决传参语法错误

嘿，我一眼就看出问题出在哪了——你遇到的是内联事件属性里的引号冲突问题，导致浏览器解析HTML时提前截断了onclick的内容，才会报那些语法错误。

问题根源 #

你的代码里用双引号包裹了onclick属性：

<td> <a href="#" onclick="showEditModal(<?php echo json_encode($value, JSON_HEX_APOS) ?>)">Edit</a> </td>

而json_encode默认会生成用双引号包裹键和字符串的JSON，比如生成的内容是{"id":1,"name":"test"}。这样渲染后HTML会变成：

<td> <a href="#" onclick="showEditModal({"id":1,"name":"test"})">Edit</a> </td>

看到没？JSON里的第一个双引号"会直接闭合onclick的属性值，剩下的id":1,"name":"test"})"就变成了无效的HTML，浏览器自然会报错说参数列表缺括号或者输入意外结束。你用了JSON_HEX_APOS只转义了单引号，但没处理双引号的冲突。

解决方案1：调整引号包裹方式 #

把onclick的双引号改成单引号，同时保留JSON_HEX_APOS转义JSON里的单引号（防止JSON内的单引号截断属性）：

<td> <a href="#" onclick='showEditModal(<?php echo json_encode($value, JSON_HEX_APOS) ?>)'>Edit</a> </td>

这样渲染后，JSON里的双引号在单引号包裹的onclick属性里是安全的，不会提前闭合属性，浏览器就能正确解析整个函数调用了。

解决方案2：用data属性+事件监听（更规范） #

内联事件容易出现这类引号问题，更推荐的做法是把JSON数据存在元素的data-*属性里，然后通过JS事件监听来触发函数：

1. 修改HTML，添加data属性：

<td> <a href="#" class="edit-btn" data-item='<?php echo json_encode($value, JSON_HEX_APOS) ?>'>Edit</a> </td>

2. 添加JS事件监听（放在页面底部或者DOMContentLoaded回调里）：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有编辑按钮绑定点击事件
  document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转
      // 解析data属性里的JSON
      const item = JSON.parse(this.dataset.item);
      // 调用你的函数
      showEditModal(item);
    });
  });
});

这种方式完全避免了内联事件的引号冲突，代码也更易维护，是现代前端开发的常用做法。

内容的提问来源于stack exchange，提问作者heisenberg