将 JSON 字符串传递给 JavaScript答案

【问题标题】：Passing JSON string to JavaScript将 JSON 字符串传递给 JavaScript
【发布时间】：2018-11-25 09:23:52
【问题描述】：

我正在做一个项目，我们为不同的部分使用了很多编码语言。

我已尝试尽可能简化问题，并提出以下建议 JSfiddle.

问题是，我有一个 JSON 字符串，我想将它传递给 JavaScript 函数。如果我从 JavaScript 调用它，就可以了。但是当我用onmouseover 调用它时，HTML 会抛出错误

未捕获的 SyntaxError：无效或意外令牌

JavaScript 代码：

 function test123(obj, e, lookupx){
      console.log(lookupx);
    }

    test123(this, event, '{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}');

HTML：

    <div>
      First check the console, direct calling with js string is ok.<br>
      Then:<br>
      <a href="#" onmouseover="test123(this, event, '{"mt:assetsys:assetuapr": 
                 {"assetmat":"material","assettag":"tag"}}');">hover this
      </a>
      <br>
      And an error occurs
    </div>

有人能解释一下这两种情况有什么区别吗？

鼠标悬停vs
直接调用函数。

【问题讨论】：

转义内部"，例如\"
因为在第二种情况下，JSON 字符串已经包含在双引号内（对于 onmouseover 属性），因此您需要转义 JSON 中的双引号，否则 onmouseover 属性将格式错误- 第一次涉及到与 JSON 相关的双引号时，它认为它是 onmouseover 属性的结尾，但事实并非如此。
当然，谢谢两位的澄清。

标签： javascript json function parameter-passing

【解决方案1】：

我有同样的情况，我最终使用Template literal

注意，HTML 属性值必须使用单引号 '。

所以你的代码可以重写如下，

<div>
  First check the console, direct calling with js string is ok.<br>
  Then:<br>
  <a href="#" onmouseover='test123(this, event, `{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}`);'>
   hover this
  </a><br>
  And an error occurs
</div>

链接到jsFiddle

【讨论】：

这很好用，谢谢！老实说，这个答案的可读性比你逃避它们时要好得多（就像在其他答案中一样）。 Ty 表示模板文字的链接。

【解决方案2】：

您必须转义 onmousover="" 中的所有引号

用这样的反斜杠转义它们 \"

【讨论】：

愚蠢的我，我当然可以做到。 Gaurav Gandhi 给出的答案更具可读性。不过还是谢谢你！

【解决方案3】：

你不是在逃避角色，你还需要像我为你的Updated JSFiddle做的那样做一些调整

检查一下，效果很好

HTML

<div>
  First check the console, direct calling with js string is ok.<br>
  Then:<br>
  <a href="#" onmouseover='test123(this, event, "{\"mt:assetsys:assetuapr\":{\"assetmat\":\"material\",\"assettag\":\"tag\"}}")'>
   hover this
  </a><br>
  And an error occurs
</div>

function test123(obj, e, lookupx){
 console.log(lookupx);
}

test123(this, event, '{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}');

希望对你有帮助！！

【讨论】：

感谢您的回答，它解决了一些问题。代码不能 100% 工作，但我明白了要点 :)
但它正在工作，我在控制台中检查了自己。 :)
好吧，我会...对不起，您的 JSFiddle 确实有效。然而，当我复制并粘贴您的 2 个块（HTML 和 JS）中给出的代码并将其粘贴到 JSFiddle 中时，它会返回：“未捕获的 ReferenceError：未定义 test123”。但我终其一生都无法发现差异。奇怪，不过，谢谢你:)
可能是你需要在JS加载类型中选择，No wrap - bottom of