html格式化json的实例代码

这篇文章主要介绍了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() {
  $('#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视频教程