HTML 之 JSON

最新推荐文章于 2024-04-15 09:00:00 发布
最新推荐文章于 2024-04-15 09:00:00 发布
阅读量1.7k 收藏 2
点赞数
文章标签： html 对象 数据 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzongnan/article/details/79586184
版权

JSON

JSON 轻量级的数据交换格式
JSON 用来表示对象和数组
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            img{
                width: 150px;
                margin: 0 auto;
            }
            .box{
                width: 960px;
                margin: 0 auto;
            }
            .address{
                border: 1px red solid;
                border-radius: 10px;
                font-size: 24px;
                text-align: center;
                margin-bottom: 10px;
            }
            .shopList{
                width: 960px;
                overflow: hidden;
            }
            .store{
                border: 1px red solid;
                border-radius: 10px;
                margin-bottom: 10px;
                width: 473px;
                text-align: center;
                overflow: hidden;
                float: left;
            }
            .menuDiv{
                border: 1px red solid;
                border-radius: 10px;
                width: 219px;
                margin-bottom: 10px;
                margin-left: 10px;
                text-align: left;
                text-indent: 1em;
                float: left;
            }
            .dosingDiv{
                overflow: hidden;
                margin: -25px 0px -5px;
                text-indent: 0em;
            }
            .indent{
                text-indent: 1em;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
        </style>
    </head>
    <body>

    </body>
    <script type="text/javascript">
        // JSON 轻量级的数据交换格式
        // XML 

        // JSON 用来表示对象和数组
        var json = '["171204", {"name":"振北", "age":"20"}, {"name":"振南", "age":"35"}]';
        // 通过 JS 自带的 JSON.parse 可以把 JSON 格式的字符串,转化为对象
        var obj = JSON.parse(json);
        console.log(obj);

        var list = '{"address":"泗泾镇九干路168号", "shopList":[{"name":"众一品过桥米线", "menu":[{"title":"黄焖鸡大份微辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "青椒"]}, {"title":"黄焖鸡大份中辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}, {"title":"黄焖鸡大份中辣", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}, {"name":"众一品过桥黄焖鸡", "menu":[{"title":"牛肉米线", "price":"20", "dosing":["土豆", "米线", "姜", "青椒"]}, {"title":"土豆米线", "price":"20", "dosing":["土豆", "牛肉", "姜", "尖椒"]}, {"title":"黄焖鸡米线", "price":"20", "dosing":["土豆", "鸡肉", "姜", "尖椒"]}]}]}';
        var box = document.createElement("div");
        box.className = "box";
        var listObj = JSON.parse(list);
        var address = document.createElement("div");
        address.className = "address";
        document.getElementsByTagName("body")[0].appendChild(box);
        box.appendChild(address);
        address.innerHTML = listObj.address;
        var shopList = document.createElement("div");
        shopList.className = "shopList";
        for (var i = 0; i < listObj.shopList.length; i++) {
            var shop = listObj.shopList[i];
            var store = document.createElement("div");
            store.className = "store";
            if (i % 2 != 0) {
                store.className = "store right";
            }
            var storeName = document.createElement("h4");
            storeName.innerHTML = shop.name;
            store.appendChild(storeName);
            for (var j = 0; j < shop.menu.length; j++) {
                var menu = shop.menu[j];
                var menuDiv = document.createElement("div");
                menuDiv.className = "menuDiv";

                var img = document.createElement("img");
                img.src = "timg.jpeg";
                menuDiv.appendChild(img);

                var menuName = document.createElement("h5");
                menuName.innerHTML = menu.title;
                menuDiv.appendChild(menuName);
                var price = document.createElement("h5");
                price.innerHTML = "价格:" + menu.price;
                menuDiv.appendChild(price);
                var dosingDiv = document.createElement("div");
                dosingDiv.className = "dosingDiv";
                for (var k = 0; k < menu.dosing.length; k++) {
                    var dosing = menu.dosing[k];
                    var dosings = document.createElement("h5");
                    dosings.className = "left";
                    if (k == 0) {
                        dosings.className = "left indent";
                        dosings.innerHTML = "配料:" + dosing + ",";
                    } else if (k != menu.dosing.length - 1) {
                        dosings.innerHTML = dosing + ",";
                    } else{
                        dosings.innerHTML = dosing;
                    }
                    dosingDiv.appendChild(dosings);
                    menuDiv.appendChild(dosingDiv);
                }
                store.appendChild(menuDiv);
            }
            shopList.appendChild(store);
        }
        box.appendChild(shopList);
    </script>
</html>

http://blog.csdn.net/huzongnan/article/list

一個頭像用四年
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在html页面中显示JSON数据
希望我的博客，能帮上你解决学习中工作中所遇到的问题,也期待与您一起探讨技术问题，共同成长。
06-16 1万+
有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。
html导入json数据格式转换,数据传输格式——XML/HTML/JSON
weixin_39524703的博客
06-02 572
xmlhtmljsonxml的官方解释是可扩展标记语言，主要用于数据传输，而HTML则是超文本标记语言，主要用于网页显示。从语法上来讲，xml和html可以被归为一类，他们遵循的语法一致，只是在web中充当的角色和标签名称上有差异。GeorgeJohnReminder一个典型的xml文档如上所示，第一行是xml的文档头声明，主要包含xml的版本、字符编码信息。之后的几行时xml文档的主题内容。该x...
HTML/JavaScript中引入json文件
qq_17627195的博客
05-06 2万+
方法一：通过<script >标签引入 第一步：在json文件中定义一个变量指向json数据（一些IDE会报错，不过不用管）。 var jsonData = { // json数据 }; 第二步：在HTML文件中使用<script>标签引入json文件 <script type="text/javascript" src="./xxx.json"></script> <script> // 控制台输出json console.log("json
如何把html的表格转json
最新发布
Dxy1239310216的博客
04-15 495
在这段代码中，我们首先获取了thead中的表头，然后遍历tbody中的每一行。在这个例子中，我将链接的href属性值作为该单元格的文本，但你也可以选择获取链接的文本内容。你的表格包含thead和tbody，这并不影响解析为JSON的逻辑。我们仍然可以按照之前的方法，只关注thead中的表头（th元素）和tbody中的行数据（td元素）。对于你的表格，我们只需要忽略操作列（因为通常它包含按钮，而不是表格的实际数据），并且处理说明列中的链接（如果需要的话）。// 处理说明列中的链接（如果需要）
php如何输出格式化的json,html格式化输出JSON
weixin_26775679的博客
03-13 271
本篇文章主要介绍了html格式化输出JSON示例(测试接口) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/R...
html2json方案
10-19
《HTML2JSON方案详解》 在信息技术领域，数据的存储和传输经常需要转换不同的格式以适应不同的应用场景。HTML（超文本标记语言）是网页内容的主要表示形式，而JSON（JavaScript Object Notation）则是广泛用于数据...
jsoneditor/JSON编辑器 、html + script
06-21
JSON编辑器是一个基于web的工具，用于查看、编辑、格式化和验证JSON。它有各种模式，如树编辑器、代码编辑器和纯文本编辑器。编辑器可以用作您自己的web应用程序中的组件。它可以作为CommonJS模块、AMD模块或常规...
HTML读取json文件示例程序.zip
07-13
在网页开发中，HTML通常用于构建页面结构，而JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，常用于存储和传输数据。当HTML需要与JSON文件交互时，通常借助JavaScript或Ajax技术来实现。这个...
HTML版JsonViewer
04-05
HTML版JsonViewer是一个用于查看和解析JSON数据的工具，它通过JsonEditor组件将复杂的JSON数据转化为可视化的树形结构，方便开发者进行调试和分析。 JsonViewer的主要特性包括： 1. **树形展示**：JsonViewer的...
Html页面动态生成Json
05-20
JSON因其简洁、易读、易解析的特性，已经成为网络上数据交换的主要格式之一。本篇文章将深入探讨如何在HTML页面中实现这一功能。 首先，我们需要了解HTML和JSON的基本概念。HTML（HyperText Markup Language）是...
HTML中json数据的处理
Playful_Elbow的博客
04-23 1139
<!DOCTYPE html> <html> <head> <title>Ajax查询用户信息_json数据处理</title> <meta charset="utf-8" /> <style type="text/css"> .head{ position:relative; border:2px solid #2e79c7; ...
HTML页面之间传递JSON两种方式
蔡定努
04-29 1万+
a.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8...
html中格式化显示json
cocos2dGirl的专栏
11-26 2715
需求是：json字符串，在页面上格式化显示 1. html先加一个pre标签 <pre id="json"></pre> 2. js代码如下 $('#json').html(syntaxHighlight(json)); // 方法实现 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2)
json 页面输出html,json输出html
weixin_30556403的博客
06-03 189
[{"fid":"1","fup":"0","type":"group","name":"娱圈","status":"1","displayorder":"0","styleid":"0","threads":"0","posts":"0","todayposts":"0","yesterdayposts":"0","rank":"0","oldrank":"0","lastpost":"","d...
HTML中.json文件数据传输问题
qq_45685580的博客
02-01 296
如何在HTML中实现json文件中经纬度数据的读取和赋值
html设置json请求头,当我想在zf2客户端代码中使用“application/json”时，接受请求标头是“text/html，application/xhtm ...（etc）”...
weixin_35348635的博客
06-29 949
我有一个完全可用的API设置，并且zf2客户端I已经在理论上建立了工作，但无论如何，我似乎无法将来自客户端的JSON请求发送到API。每当我测试一下我不断收到以下标题而这又返回406错误：当我想在zf2客户端代码中使用“application/json”时，接受请求标头是“text/html，application/xhtm ...(etc)”Accept: text/html,applicati...
HTML显示json字符串并且进行格式化
热门推荐
希望能找到你的答案
01-31 18万+
通过pre标签进行格式化展示，使用JSON.stringify()方法转换。 代码如下： HTML显示json字符串并且进行格式化 { "name": "Brett", "address":"北京路23号", "email": "123456@qq.com" } 　 var text = document.getElementById('show_p').innerTex
js将json自动转html表格实例
ardo_pass的博客
11-20 1万+
Js自动将json格式转成html table形式展现，做下笔记 截图如下： html代码： var jsonArray = [{"编号":"1001","名称":"k-means","描述":"K-means算法是硬聚类算法，是典型的基于原型的目标函数聚类方法的代表","操作":"编辑"},{"编号":"1002","名称":"rest
html转json
06-02
将 HTML 转换为 JSON 的过程可以分为两个步骤： 1. 解析 HTML：使用解析器（如 Beautiful Soup）将 HTML 转换为 Python 对象（如 BeautifulSoup 对象）。 2. 转换为 JSON：使用 Python 的内置模块 json 将 Python ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值