您的位置：首页 > 网页制作 > html教程

html格式化json的实例代码

  发布时间：2023-07-21 15:37:59   作者：langzi  
这篇文章主要介绍了html格式化json的实例代码,需要的朋友可以参考下

　　具体代码如下所示：
 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>JS Bin</title> 
  6.   <link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" /> 
  7.   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
  8.   <script type="text/javascript" src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script> 
  9.   <script type="text/javascript"> 
  10. 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"}; 
  11. $(function() { 
  12.   $('#json').JSONView(json); 
  13.   $('#collapse-btn').on('click', function() { 
  14.     $('#json').JSONView('collapse'); 
  15.   }); 
  16.   $('#expand-btn').on('click', function() { 
  17.     $('#json').JSONView('expand'); 
  18.   }); 
  19.   $('#toggle-btn').on('click', function() { 
  20.     $('#json').JSONView('toggle'); 
  21.   }); 
  22.   $('#toggle-level1-btn').on('click', function() { 
  23.     $('#json').JSONView('toggle', 1); 
  24.   }); 
  25.   $('#toggle-level2-btn').on('click', function() { 
  26.     $('#json').JSONView('toggle', 2); 
  27.   }); 
  28. }); 
  29.   </script> 
  30. </head> 
  31. <body> 
  32.   <br/> 
  33.   <button id="collapse-btn">Collapse</button> 
  34.   <button id="expand-btn">Expand</button> 
  35.   <button id="toggle-btn">Toggle</button> 
  36.   <button id="toggle-level1-btn">Toggle level1</button> 
  37.   <button id="toggle-level2-btn">Toggle level2</button>     <div id="json"></div> 
  38. </body> 
  39. </html> 

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

以上所述是小编给大家介绍的html格式化json的实例代码

  • Tag：