如何根据按钮点击在同一视图上显示两种类型的json

根据按钮点击在同一视图上显示两种类型的JSON，可以通过以下步骤实现：

首先，在前端开发中，使用HTML和CSS创建一个按钮和一个用于显示JSON数据的容器。可以使用按钮的点击事件来触发显示不同类型的JSON数据。
在后端开发中，可以使用任何一种后端编程语言（如Python、Java、Node.js等）来处理按钮点击事件，并根据不同的按钮点击来返回不同类型的JSON数据。
在按钮的点击事件处理程序中，根据按钮的标识或其他条件，调用后端接口获取相应类型的JSON数据。
后端接口可以通过数据库查询、调用其他API或者直接返回预定义的JSON数据来获取需要显示的数据。
将获取到的JSON数据通过前端的异步请求（如AJAX）发送到前端，并在前端的容器中显示。

以下是一个示例代码，使用JavaScript和Node.js来实现上述功能：

前端代码（HTML和JavaScript）：

<!DOCTYPE html>
<html>
<head>
    <title>显示JSON数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn1").click(function() {
                $.ajax({
                    url: "/getData?type=type1",
                    type: "GET",
                    success: function(data) {
                        $("#jsonContainer").text(JSON.stringify(data));
                    }
                });
            });

            $("#btn2").click(function() {
                $.ajax({
                    url: "/getData?type=type2",
                    type: "GET",
                    success: function(data) {
                        $("#jsonContainer").text(JSON.stringify(data));
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn1">显示类型1的JSON</button>
    <button id="btn2">显示类型2的JSON</button>
    <div id="jsonContainer"></div>
</body>
</html>

后端代码（Node.js）：

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

app.get("/getData", function(req, res) {
    const type = req.query.type;
    let jsonData;

    if (type === "type1") {
        jsonData = {
            name: "Type 1",
            description: "This is type 1 JSON data."
        };
    } else if (type === "type2") {
        jsonData = {
            name: "Type 2",
            description: "This is type 2 JSON data."
        };
    } else {
        jsonData = {
            error: "Invalid type"
        };
    }

    res.json(jsonData);
});

app.listen(3000, function() {
    console.log("Server is running on port 3000");
});

在上述示例中，点击按钮会发送异步请求到后端的/getData接口，并通过URL参数type指定需要获取的JSON数据类型。后端根据type参数的值返回相应的JSON数据。前端接收到返回的JSON数据后，将其显示在jsonContainer容器中。

请注意，以上示例仅为演示目的，实际应用中可能需要根据具体需求进行适当的修改和优化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云API网关（API Gateway）等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。