来自 html 元素的 Jquery Parse JSON答案

【问题标题】：Jquery Parse JSON coming from an html element来自 html 元素的 Jquery Parse JSON
【发布时间】：2016-09-28 17:02:13
【问题描述】：

我正在尝试将来自服务器的一些 JSON 解析为我可以在 Javascript 中使用的对象。 JSON 由服务器保存在 span 中。当我单击操作按钮时，它应该获取 JSON 并将其解析为一个对象。不幸的是，我遇到了一个例外。请看代码：

$(function(){
  $("#btn").click(function(elem){
    var elem = $("#content");
    var html = elem.html();
    console.log(html);
    var x = JSON.parse(html);
    console.log(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="btn">Action</button>
    <br/><br/>
     <span id="content">{"test" : "<a href=\"http://cnn.com\">CNN</a> Hello"}</span>
</body>

我还尝试了跨度中的内容没有转义“：”

<span id="content">{"test" : "<a href="http://cnn.com">CNN</a> Hello"}</span>

知道怎么解决吗？

背景说明：这是在需要接收 json 来初始化模型的 Angular 应用程序中使用的。

【问题讨论】：

您能否在问题中包含javascript，其中从服务器返回的JSON 设置为html of #content 元素？
抱歉，我不明白您需要什么？
检查表：<a> 是要在 #content 内直观地显示，还是 #content 隐藏。这种传输 JSON 数据的方法注定会失败，因为原始 HTML 标记被解析为 DOM 并被丢弃。 .html() 调用不会为您提供原始标记。它会即时生成它。
@checklist “抱歉，我不明白您需要什么？” 您是如何设置#content 元素的html 的？建议使用元素的.dataset 或.data() 来存储JSON。通过使用元素的.innerHTML 来回转换，您可能会丢失精确的JSON 表示。
@checklist "我正在尝试解析来自服务器的一些 JSON" 你如何从服务器检索JSON？您可以在问题中包含javascript 的那部分吗？

标签： javascript jquery json parsing

【解决方案1】：

您可以将html 传递给JSON.stringify()

$(function(){
  $("#btn").click(function(elem){
    var elem = $("#content");
    var html = elem.html();
    console.log(html);
    var x = JSON.parse(JSON.stringify(html));
    console.log(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="btn">Action</button>
    <br/><br/>
     <span id="content">{"test" : "<a href=\"http://cnn.com\">CNN</a> Hello"}</span>
</body>

【讨论】：

他们为什么要将字符串传递给JSON.stringify？
@squint，确实，你是对的，我无法访问.test，因为parse 返回了一个字符串。我从没想过parse 可以返回一个字符串:)。我想我需要阅读更多关于 stringify 和 parse 工作原理的信息
@guest271314：哦，我认为他们只是使用 HTML 文档将 JSON 数据传输到浏览器。 "...JSON 由服务器保存在一个范围内..." 所以我认为 OP 正在准确显示它是如何从服务器发送的。 data- 属性会更好。
...我认为 OP 希望 .html() 能够提供原始 HTML 标记。很多人没有意识到原始 HTML 在到达浏览器后就消失了。
我得走了。祝你好运！

【解决方案2】：

function parse() {
  var span = document.querySelector('span');
  console.log(JSON.parse(span.textContent));
}

<span id="content">{"test" : "&lt;a href=\"http://cnn.com\"&gt;CNN&lt;/a&gt; Hello"}</span>
<button onclick="parse()">parse</button>

跨度内的内容

<span id="content">{"test" : "<a href="http://cnn.com">CNN</a> Hello"}</span>

应该转义

<span id="content">{"test" : "&lt;a href=\"http://cnn.com\"&gt;CNN&lt;/a&gt; Hello"}</span>

【讨论】：