html格式化json的实例代码

ID:8089 / 打印

这篇文章主要介绍了html格式化json的实例代码,需要的朋友可以参考下

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>JS Bin</title>   <link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" />   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>   <script type="text/javascript" src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script>   <script type="text/javascript"> var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"],"anotherarray": [1, 2], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com is great"}; $(function() {   $(&#39;#json&#39;).JSONView(json);   $(&#39;#collapse-btn&#39;).on(&#39;click&#39;, function() {     $(&#39;#json&#39;).JSONView(&#39;collapse&#39;);   });   $(&#39;#expand-btn&#39;).on(&#39;click&#39;, function() {     $(&#39;#json&#39;).JSONView(&#39;expand&#39;);   });   $(&#39;#toggle-btn&#39;).on(&#39;click&#39;, function() {     $(&#39;#json&#39;).JSONView(&#39;toggle&#39;);   });   $(&#39;#toggle-level1-btn&#39;).on(&#39;click&#39;, function() {     $(&#39;#json&#39;).JSONView(&#39;toggle&#39;, 1);   });   $(&#39;#toggle-level2-btn&#39;).on(&#39;click&#39;, function() {     $(&#39;#json&#39;).JSONView(&#39;toggle&#39;, 2);   }); });   </script> </head> <body>   <br/>   <button id="collapse-btn">Collapse</button>   <button id="expand-btn">Expand</button>   <button id="toggle-btn">Toggle</button>   <button id="toggle-level1-btn">Toggle level1</button>   <button id="toggle-level2-btn">Toggle level2</button>     <p id="json"></p> </body> </html>

如demo所示，显示格式化的json

【相关推荐】

1. 免费h5在线视频教程

立即学习“前端免费学习笔记（深入）”；

2. HTML5 完整版手册

3. php.cn原创html5视频教程

上一篇: HTML5中属性download的详细介绍

下一篇: H5和CSS3组合使用的实例教程

作者：admin @ 24资源网 2024-09-18

本站所有软件、源码、文章均有网友提供，如有侵权联系308410122@qq.com