Question

编辑：在与guest271314交换之后，我意识到问题的措辞（在我的问题正文中）可能会产生误导。我保留旧版本，并更好地重写了新版本

后台： 从远程服务器获取JSON时，响应标头包含Content-Type: application/json条目，建议浏览器将内容呈现为JSON。这使Chrome extensions或本机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>

对同一来源的影响：

是否有可能从JS实现与在浏览器中直接查询源的效果相同的效果？让浏览器自己的机制（由...构建 - 生成JavaScript生成的JSON在或通过扩展）？

Answer 1

好吧，你的浏览器扩展程序无法捕捉到这一点。我没有看到任何选择。当JavaScript被执行时，已经发送了标题，所以我猜，你的扩展已经不在游戏中了。

顺便说一句，stringify（）函数工作正常。你想要的是一个人类可读的输出。

您是否想过像

这样的JavaScript代码荧光笔

应该有一个像浏览器扩展一样支持JSON呈现。

Answer 2

问题是，当httpbin.org/get将text/html作为文档类型时，您的文档显示为application/json。你已经用过了

<meta http-equiv="content-type" content="application/json; charset=UTF-8"/>

但如果您右键单击firefox中的页面（chrome显然没有此选项）并选择查看页面信息（或类似内容），则类型仍为text/html，尽管开发工具中的标题已显示{ {1}}。此外，当您查看开发工具中的响应时，您的响应是一个html文件，而来自httpbin.org/get的响应是普通的json，没有正文标记等。

所以我试图用json内容替换整个html内容：

content-type: application/json

但是第一个给出了错误（document.documentElement.outerHTML = JSON.stringify(text) // or document.documentElement.outerHTML.replace(JSON.stringify(text))）。第二个只是用JSON数据替换Modifications are not allowed for this document的全部内容。但它仍然无效。因此，除非您不使用仅在调用站点时重新生成JSON的后端服务器，否则将无法使用浏览器JSON查看器。

另一种选择是重定向：

<body></body>

Answer 3

如果正确收集问题，您可以使用<pre>元素呈现JSON并使用JSON.stringify()的第三个参数进行缩进

<pre id='root'></pre>

document.getElementById('root').textContent = JSON.stringify(text, null, 4)

Answer 4

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

Content-Type: application/json的HTML标头确实需要与响应一起发送，但响应正文中不能包含HTML。

我建议调查NodeJS和Express库，开始构建服务器端javascript应用程序。

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

4 个答案: