Nodejs 界面如何显示json数据，以正常的json格式，就如在线json格式解析那样

Nodejs 界面如何显示json数据，以正常的json格式，就如在线json格式解析那样

我是用minuui做界面， $.ajax({ url : “/config2”, dataType: ‘json’, cache: false, type : “post”, data : { type:“show”, version:version, channel:channel }, success : function(result) { } 然后 result是一个json数据，但是目前在textarea里面显示为字符串，怎么显示json格式的数据？

7 回复

当然可以！你提到的场景中，result 是一个 JSON 对象，但你想在界面上以标准的 JSON 格式展示它。你可以使用 JavaScript 的 JSON.stringify 方法来将 JSON 对象转换成格式化的字符串，并将其插入到页面中的某个元素（例如 <pre> 或 <code> 标签）中。

以下是一个完整的示例，展示了如何在 Node.js 中实现这一点：

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show JSON Data</title>
</head>
<body>
    <div id="json-container">
        <!-- JSON 数据将被显示在这里 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript 文件 (app.js)

$(document).ready(function() {
    $.ajax({
        url: "/config2",
        dataType: 'json',
        cache: false,
        type: "POST",
        data: {
            type: "show",
            version: "1.0.0",
            channel: "development"
        },
        success: function(result) {
            // 将 JSON 对象转换成格式化的字符串
            const formattedJson = JSON.stringify(result, null, 2);
            
            // 将格式化的 JSON 字符串插入到页面中的 <pre> 标签中
            $('#json-container').html(`<pre>${formattedJson}</pre>`);
        }
    });
});

解释

  1. HTML 文件:

    • 我们创建了一个简单的 HTML 页面，并添加了一个 div 元素用于显示 JSON 数据。
    • 引入了 jQuery 库以便于进行 AJAX 请求。
    • 引入了 app.js 文件，这是我们的 JavaScript 文件。

  2. JavaScript 文件 (app.js):

    • 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
    • 发送 AJAX 请求到 /config2 路径，获取 JSON 数据。
    • 在成功回调函数中，使用 JSON.stringify(result, null, 2) 将 JSON 对象转换成格式化的字符串。第二个参数 null 表示没有替换函数，第三个参数 2 表示缩进两个空格。
    • 将格式化后的 JSON 字符串插入到页面中的 <pre> 标签中，这样可以保留格式并使输出更易读。

这样，你就可以在网页上看到格式化的 JSON 数据了。


什么是 json 格式的数据？

好吧 可能我表达不是太准确，这样的数据 { “1”: { “type”: “1”, “switch”: “1”, “startTime”: “1405405793”, “endTime”: “1405664993”, “signDays”: “3”, “awardCoin”: “100000”, “desc”: “desc” }, “2”: { “type”: “2”, “switch”: “1”, “startTime”: “0”, “endTime”: “0”, “dropRate”: “20”, “dropNumRate”: "20“ }, }

现在网页中显示是这样的

{“1”:{“type”:“1”,“switch”:“1”,“startTime”:“1405405793”,“endTime”:“1405664993”,“signDays”:“3”,“awardCoin”:“100000”,“desc”:“desc”},“2”:{“type”:“2”,“switch”:“1”,“startTime”:“0”,“endTime”:“0”,“dropRate”:“20”,“dropNumRate”:“20”},“3”:{“type”:“3”,“switch”:“1”,“startTime”:“0”,“endTime”:“0”,“missions”:[{“mission”:“0”},{“mission”:“1|4|3”},{“mission”:“1|2”},{“mission”:“2|4”},{“mission”:“1|3|4”}],“awardGem”:6}}

希望能这样显示： { “1”: { “type”: “1”, “switch”: “1”, “startTime”: “1405405793”, “endTime”: “1405664993”, “signDays”: “3”, “awardCoin”: “100000”, “desc”: “desc” }, “2”: { “type”: “2”, “switch”: “1”, “startTime”: “0”, “endTime”: “0”, “dropRate”: “20”, “dropNumRate”: "20“ }, }

你需要的是json代码格式化…

嗯 对的 或者说可以让这个控件能解析json

要在Node.js界面上以正常的JSON格式显示JSON数据，可以使用HTML的<pre>标签结合JavaScript来格式化并显示JSON数据。<pre>标签会保留空格和换行符，这对于展示格式化的JSON非常有用。下面是一个完整的示例，包括前端和后端代码。

后端（Node.js）

假设你有一个简单的Express应用来返回JSON数据：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/config2', (req, res) => {
    const data = {
        name: "John Doe",
        age: 30,
        address: {
            street: "123 Main St",
            city: "Anytown"
        }
    };
    res.json(data);
});

app.listen(3000, () => console.log('Server is running on port 3000'));

前端

在前端页面中，你可以这样处理返回的JSON数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show JSON Data</title>
</head>
<body>
    <h1>JSON Data:</h1>
    <pre id="json-data"></pre>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            $.ajax({
                url: "/config2",
                type: "POST",
                dataType: 'json',
                cache: false,
                data: {
                    type: "show",
                    version: "1.0",
                    channel: "dev"
                },
                success: function(result) {
                    // 将JSON对象转换成格式化的JSON字符串
                    const formattedJson = JSON.stringify(result, null, 4); // 4个空格缩进
                    document.getElementById('json-data').textContent = formattedJson;
                },
                error: function(error) {
                    console.error("Error fetching JSON:", error);
                }
            });
        });
    </script>
</body>
</html>

解释

  1. 后端：我们创建了一个简单的Express应用，它处理一个POST请求，并返回一个JSON对象。
  2. 前端：我们在页面中使用了jQuery发起AJAX请求，并在成功回调函数中使用JSON.stringify将JSON对象转换成格式化的字符串。JSON.stringify的第二个参数是null，第三个参数设置为4，这意味着每个层级将会被缩进4个空格，便于阅读。
  3. 使用<pre>标签确保JSON文本以格式化的方式显示在页面上。

这样，当你在浏览器中查看页面时，就能看到格式化的JSON数据了。

回到顶部