显示json，json的定义

最新推荐文章于 2023-12-27 09:08:12 发布
最新推荐文章于 2023-12-27 09:08:12 发布
阅读量144 收藏
点赞数
文章标签： json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47353899/article/details/131141909
版权

作为老师，我可以为您提供一些示例代码，以演示如何使用<li>、<table>和复选框（checkbox）来获取外部JSON数据。

  1. 使用<li>列表显示外部JSON数据：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用<li>显示外部JSON数据</title>
    <script>
        // 创建 XMLHttpRequest 对象
        let request = new XMLHttpRequest();
        // 发起 GET 请求，获取 JSON 数据
        request.open("GET", "data.json", true);
        // 监听请求状态变化
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                // 将 JSON 数据解析为 JavaScript 对象
                let data = JSON.parse(request.responseText);
                // 获取 <ul> 元素
                let ul = document.getElementById("jsonList");
                // 遍历数据填充列表项
                data.forEach(function(item) {
                    let li = document.createElement('li');
                    li.innerText = item.name;
                    ul.appendChild(li);
                });
            }
        }
        // 发送请求
        request.send();
    </script>
</head>
<body>
    <ul id="jsonList"></ul>
</body>
</html>
  1. 使用<table>显示外部JSON数据：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用<table>显示外部JSON数据</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
    </style>
    <script>
        // 创建 XMLHttpRequest 对象
        let request = new XMLHttpRequest();
        // 发起 GET 请求，获取 JSON 数据
        request.open("GET", "data.json", true);
        // 监听请求状态变化
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                // 将 JSON 数据解析为 JavaScript 对象
                let data = JSON.parse(request.responseText);
                // 获取 <table> 元素
                let table = document.getElementById("jsonTable");
                // 创建表头
                let thead = table.createTHead();
                let headerRow = thead.insertRow();
                Object.keys(data[0]).forEach(function(key) {
                    let th = document.createElement("th");
                    th.innerText = key;
                    headerRow.appendChild(th);
                });
                // 填充表格数据
                let tbody = table.createTBody();
                data.forEach(function(item) {
                    let row = tbody.insertRow();
                    Object.values(item).forEach(function(value) {
                        let cell = row.insertCell();
                        cell.innerText = value;
                    });
                });
            }
        }
        // 发送请求
        request.send();
    </script>
</head>
<body>
    <table id="jsonTable"></table>
</body>
</html>
  1. 使用复选框显示外部JSON数据：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用复选框显示外部JSON数据</title>
    <script>
        // 创建 XMLHttpRequest 对象
        let request = new XMLHttpRequest();
        // 发起 GET 请求，获取 JSON 数据
        request.open("GET", "

data.json", true);
        // 监听请求状态变化
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                // 将 JSON 数据解析为 JavaScript 对象
                let data = JSON.parse(request.responseText);
                // 获取容器元素
                let container = document.getElementById("checkboxContainer");
                // 遍历数据创建复选框
                data.forEach(function(item) {
                    let label = document.createElement("label");
                    let checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.value = item.name;
                    label.appendChild(checkbox);
                    label.appendChild(document.createTextNode(item.name));
                    container.appendChild(label);
                });
            }
        }
        // 发送请求
        request.send();
    </script>
</head>
<body>
    <div id="checkboxContainer"></div>
</body>
</html>

以上是三个示例代码，分别展示了如何使用<li>、<table>和复选框来获取外部JSON数据，并根据数据填充相关元素。请确保将data.json替换为实际的JSON数据文件的路径。
当然，我可以为您提供对应的JSON数据示例。以下是与前面示例代码匹配的JSON数据：

  1. data.json（用于使用<li>显示外部JSON数据）：
[
  { "name": "Item 1" },
  { "name": "Item 2" },
  { "name": "Item 3" },
  { "name": "Item 4" }
]
  1. data.json（用于使用<table>显示外部JSON数据）：
[
  { "name": "John", "age": 25, "country": "USA" },
  { "name": "Emma", "age": 28, "country": "UK" },
  { "name": "Satoshi", "age": 31, "country": "Japan" },
  { "name": "Sophie", "age": 22, "country": "France" }
]
  1. data.json（用于使用复选框显示外部JSON数据）：
[
  { "name": "Option 1" },
  { "name": "Option 2" },
  { "name": "Option 3" },
  { "name": "Option 4" }
]

请将相应的JSON数据保存为名为data.json的文件，并将其与相应的HTML文件放置在同一目录下，以使示例代码能够正确加载和解析JSON数据。

zz的学习记录
关注
json数据在Html页面格式化显示
11-01
json数据在Html页面，采用光标事件格式化展示，方便用户查看对比接口文档
JSON数据展示
A_lamp的博客
11-02 378
json数据展示
显示json 值
三百两
12-20 306
/** *content : 显示json 值 *time : 2016年12月20日11:48:19 *参数 obj:对象 attr:属性名 */function writeObj(obj) { var description = “”; for (var i in obj) { var property = obj[i];
JsonView 很不错的json可视化显示工具
02-13
JsonView 很不错的json可视化显示工具
JSON中的{}与[]
weixin_33817333的博客
03-11 501
[] 与  {} 在 JSON 里 [] 是 Array(也就是数组)   {} 是Ojbect（也就是对象） [] Array 的key 是 int. {} 的key 是 string   例如 var dot1=["a"]; 就是一个数组       var dot2={"a"} 就是一个对象 数组和对象转换非常简单， dot1把[] 替换为{} 就是对象， dot2把[]替换为{}...
JSON-Schema定义规范
01-25
### JSON-Schema定义规范 #### 前言 在现代软件开发中，数据交换与处理是必不可少的一部分。随着Web服务的普及以及API的发展，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其简单易读且...
Qt4实现json文件的读取和显示
04-28
在`widget.h`中，定义一个窗口类，包含用于显示JSON数据的成员变量和方法： ```cpp #include #include #include "json.h" // 引入QtJson库的头文件 class Widget : public QWidget { Q_OBJECT public: Widget...
json定义及jquery操作json的方法
11-23
1、json定义： 简单的json格式为[{“key1″:”value1”},{“key2″:”value2”}], []代表数组，{}代表数组中的数据对象,key1,key2是一个json对象中的key，一个json中key值唯一，value1,value2，是key键对应的值。 ...
json定义json定义json定义json定义json定义
03-25
JSON，全称JavaScript Object Notation，是一种轻量级的数据交换格式，它基于ECMA-262第三版（1999年的JavaScript语言标准）的一个子集，设计简单且易于人阅读和编写，同时也易于机器解析和生成。JSON的结构主要由两...
Chrom进行显示JSON数据
01-16
安装JSON-handle后，你可以在接收到JSON响应时，选择用该插件来解析和显示数据，这可能包括颜色高亮、折叠/展开键值对、搜索特定值等功能。 在Java后端开发中，通常我们会使用如Spring Boot这样的框架来处理HTTP...
json源码展示
01-16
jsonview 代码展示jsonview 代码展示jsonview 代码展示
页面json展示
04-11
NULL 博文链接：https://zhuzl5210798.iteye.com/blog/1685509
强制IE显示Json
07-30
在开发过程中，解决IE浏览器不能显示Json格式的问题。
JSON数据显示解析工具Json Viewer.zip
09-03
软件介绍: JsonView是一款数据解析软件，用于对json数据进行解析、显示和排错。
Json格式可视化显示工具 JsonView
04-27
Json格式可视化显示工具
js显示json数据
山鹰的专栏
07-16 2765
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 复制代码 代码如下: $.getJSON(url,[data],[callback]) url：加载的页面地址 data: 可选项，发送到服务器的数据，格式是key/value callback:可选项，加载成功后执行的回调函数 1.首先建一个JSON格式的文件useri
功夫不负有心人之json数据的显示问题
过客的博客
08-04 1396
--> 通过 AJAX 改变文本 reJson内容 通过 AJAX 改变文本 reJson内容        --> $("#danmup").DanmuPlayer({ src:"level5.mp4", height: "480px", //区域的高度 width: "800px" //区
自定义配置json显示信息
asd53564967的博客
06-01 430
根据后台传过来的json， 配置需要显示的字段
前端显示json格式化
最新发布
php-yyds
12-27 3712
用户可以在文本框中输入JSON数据，然后点击"格式化JSON"按钮，就可以看到格式化后的JSON数据在页面上展示出来了。这样，格式化的JSON数据就会显示在指定的HTML元素中。获取JSON数据：首先，你需要获取要展示的JSON数据。格式化JSON：使用JavaScript的JSON对象，可以将JSON数据转换为字符串，并使用。然后，我们添加了一个按钮，当用户点击按钮时，会调用。方法将JSON对象格式化为字符串，并将格式化后的JSON字符串赋值给。函数中，我们首先获取用户输入的JSON数据，并使用。
Blockly块定义：JSON与JavaScript
JSON格式是一种平台无关的定义方式，适用于Web、Android和iOS，便于跨平台使用和语言本地化。JSON的结构清晰，适合定义基础的积木属性。 然而，JSON格式有其局限性，不能直接支持复杂的功能，比如mutator（用于改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值