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,"thrh1>
ee"],"anotherarray": [1, 2], "more":"stuff"}
,"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com is great"}
    ;
$(function() {
      $('#json').JSONView(json);
  $('#collapse-BTn').on('click', function() {
        $('#json').JSONView('collapse');
  }
    );
  $('#expand-btn').on('click', function() {
        $('#json').JSONView('expand');
  }
    );
  $('#toggle-btn').on('click', function() {
        $('#json').JSONView('toggle');
  }
    );
  $('#toggle-level1-btn').on('click', function() {
        $('#json').JSONView('toggle', 1);
  }
    );
  $('#toggle-level2-btn').on('click', function() {
        $('#json').JSONView('toggle', 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视频教程

以上就是html格式化json的实例代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！