Javascript JSON.parse 字符串 onclick 内联

Posted 2023-05-08

【中文标题】Javascript JSON.parse 字符串 onclick 内联

【英文标题】：Javascript JSON.parse string onclick in-line

【发布时间】：2018-11-18 02:13:32

【问题描述】：

我正在使用 jquery 将 html 附加到 ID；具体来说，我无法将 JSON 格式的字符串放入元素的 onclick 参数中。我故意希望在单击时解析 JSON，并且对于此特定工作中存在于 DOM 中的 JSON 完全可以接受。

我认为问题与正确转义引号有关（因为 Chrome Inspect Elements 调试显示每个 JSON 元素都被视为 HTML 标记而不是字符串 - 请参阅 https://ibb.co/eHOgq8 以获取有关 DOM 的屏幕截图正在解释中）

var str = '"artist":"So and So","title":"Not Relevant"';

$("#d").append('<ul><li><a onclick="JSON.parse(\'' + str + '\')" title="NA">Link</a></li></ul>')

我尝试过使用多种转义机制和引号类型以及一些本机 javascript 转义，但没有得到任何结果。 2小时后，我不得不求助。非常感谢您。

【问题讨论】：

您真正想通过将 JSON 放入 onClick 来实现什么？现在我没有任何意义。

【参考方案1】：

试试这个：

var str = '"artist":"So and So","title":"Not Relevant"';

var jsonObj = JSON.parse(str);

$("#d").append('<ul><li><a onclick="alert(JSON.stringify(jsonObj))" title="NA">Link</a></li></ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>

【讨论】：

非常感谢您对我有/有的问题的迟到但直接的回答。非常感谢！

【参考方案2】：

不要尝试分配具有内联属性的处理程序 - 这与 eval 一样糟糕，并且正如您所遇到的那样，可能会导致转义字符出现令人困惑的问题。相反，请使用 Javascript 正确附加处理程序，例如：

var str = '"artist":"So and So","title":"Not Relevant"';
$('#div').append('<ul><li><a title="etc">link</a></li></ul>');
$('div a').on('click', () => console.log(JSON.parse(str)));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>

【讨论】：

感谢您的快速回复！也许我没有提供足够的背景来解决我的真正问题。以上将起作用，但是当我编写更新的 HTML 时，我正处于循环的中间，因此每个 click 事件都需要针对一个唯一的 div。此外，我已经可以让它以正确的格式登录到控制台，但是当注入到 DOM 中时，它开始认为 json 键/值对实际上是 HTML 元素（我太早捕捉到 onClick 的结束引号思考）。真实代码见ibb.co/kv9PtT。 JSON 是可信的（用户不能更改/注入）。希望你能帮忙！

这只是一个示例 - 如果您有多个 as，那么您当然必须使选择器更具体，例如定位最后一个 a 或为a 之前的 appending 它。如果代码与您的问题相关，请将其发布在您的问题中（请参阅如何提问页面）