如何从JavaScript输出JSON输出，以便将其识别为JSON？_Javascript_Json_Ajax

如何从JavaScript输出JSON输出，以便将其识别为JSON？

javascript json ajax

如何从JavaScript输出JSON输出，以便将其识别为JSON？,javascript,json,ajax,Javascript,Json,Ajax,编辑：在与来宾271314交流后，我意识到问题的措辞（在我的问题主体中）可能会误导。我保留了旧版本，更好地改写了新版本 Background:从远程服务器获取JSON时，响应头包括一个内容类型：application/JSON条目，建议浏览器将内容呈现为JSON。这将启用或本机Firefox功能来格式化输出：我的问题：我希望使用JavaScript提供的JSON获得相同的呈现（由浏览器完成），首先获取内容，然后将其推入DOM。这不起作用，我只能得到一个JSON字符串，呈现为字符串。JSON

编辑：在与来宾271314交流后，我意识到问题的措辞（在我的问题主体中）可能会误导。我保留了旧版本，更好地改写了新版本

Background:从远程服务器获取JSON时，响应头包括一个

内容类型：application/JSON

条目，建议浏览器将内容呈现为JSON。这将启用或本机Firefox功能来格式化输出：

我的问题：我希望使用JavaScript提供的JSON获得相同的呈现（由浏览器完成），首先获取内容，然后将其推入DOM。这不起作用，我只能得到一个JSON字符串，呈现为字符串。JSON呈现为字符串，而不是由浏览器格式化

到目前为止我的想法：看来我没能做到

将JSON输出为不带分隔符的字符串
通知浏览器内容是JSON

我尝试的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- here I am trying to simulate the response headers so that the
    browser is hinted of the content type -->
    <meta http-equiv="content-type" content="application/json; charset=UTF-8"/>
</head>
<body>
    <div id='root'></div>
    <script>
        fetch('https://httpbin.org/get')
            .then(function (r) {
                if (r.ok) {
                    return r.json()
                }
                throw new Error('response was not ok: ' + r.statusText)
            })
            .then(function (text) {
                // here I am stringyfying the JSON Object and replacing a DOM
                // element with it (including the delimiters). The string is 
                // unfortunately quote-delimited
                document.getElementById('root').outerHTML = JSON.stringify(text)
            })
            .catch(function (err) {
                console.log(err)
            })
    </script>
</body>
</html>


取（'https://httpbin.org/get')
.然后（函数（r）{
如果（r.ok）{
返回r.json（）
}
抛出新错误（'响应不正常：'+r.statusText）
})
.然后（函数（文本）{
//在这里，我严格处理JSON对象并替换DOM
//元素（包括分隔符）。字符串为
//不幸的是，引号被分隔了
document.getElementById（'root'）.outerHTML=JSON.stringify（文本）
})
.catch（函数（err）{
console.log（错误）
})

对同一来源的影响：

通过JS是否可以实现与直接在浏览器中查询源代码相同的效果？要让JavaScript生成的JSON通过浏览器自己的机制（内置或通过扩展）呈现得非常漂亮，浏览器扩展无法捕捉到这一点。我看不到任何选择。当JavaScript被执行时，头已经被发送了，所以我猜，你的扩展已经退出了游戏
顺便说一句，stringify（）函数可以正常工作。您需要的是一个可读的输出
你有没有想过像这样的JavaScript代码亮点

应该有一个像浏览器扩展一样支持JSON呈现
如果正确收集问题，您可以使用
<pre id='root'></pre>

JSON服务是在服务器端完成的，而不是客户端

Content-Type:application/json
的HTML头确实需要与响应一起发送，但响应体中不能存在HTML

我建议查看NodeJS和Express库，开始构建服务器端javascript应用程序。
问题是，您的文档显示为
text/html
，而httpbin.org/get将
application/json
作为文档类型。你已经用过了

document.documentElement.outerHTML = JSON.stringify(text) // or document.documentElement.outerHTML.replace(JSON.stringify(text))
但是第一个给出了一个错误（
此文档不允许修改）。第二个只是用JSON数据替换的全部内容。但它仍然不起作用。因此，除非您不使用在调用站点后重新运行JSON的后端服务器，否则就不可能使用浏览器JSON查看器另一种选择是重定向：把它放到一个iframe里，也许？或者只是重定向？因为浏览器已经收到响应并决定了此时的内容类型，您可能无法在以后更改它。不收集您试图实现的内容？“在这里，我正在字符串化JSON对象”JSON 是字符串格式，而不是对象.json（）将json 转换为JavaScript对象。@Jonasw：这是个好主意，但我会在我的代码中生成json对象。如果你需要在DOM中构造一个树视图，你可以使用一些库，如jstree 或类似的东西来简化它。谢谢。我知道.stringify（）工作得很好（从来没有说过不是这样），但输出效果不太好。你所说的关于扩展退出游戏的说法很有道理：即使我修改了有效的内容类型，也太晚了。顺便说一下：如果.stringify（）的输出是人类可读的-JSON将被破坏。当然，我没有任何反对stringify（）的意见 -我的目的是了解渲染为何不同（是什么导致第一次漂亮打印启动，而第二次没有启动）。我想得越多，我就越觉得这个扩展在游戏中还为时过早（并且无法捕捉到JS推送的内容类型提示）抱歉，如果我的问题不够清楚，但是（接受我上面的最后一点评论）我不想显示一个漂亮的打印树（有很好的库用于此），我试图理解为什么两个屏幕截图的呈现方式不同。第二个屏幕截图中的JSON 似乎直接加载到.innerHTML 。第一个屏幕截图似乎是一个嵌入式应用程序；至少包括css 。尽管截图通常提供了足够的细节。您是否可以为尝试描述的每个渲染创建一个plnkr版本？不能将HTML 转换为JSON 或呈现为缩进的JSON JSON 是一个字符串，不需要缩进。图书馆是不必要的。您可以使用适当的HTML 元素或css 来呈现特定格式的JSONmanner@guest271314第一个站点（httpbin.or） <meta http-equiv="content-type" content="application/json; charset=UTF-8"/> document.documentElement.outerHTML = JSON.stringify(text) // or document.documentElement.outerHTML.replace(JSON.stringify(text)) window.location = "https://httpbin.org/get";