jQuery.jsonview.js 的示例

最新推荐文章于 2025-10-08 14:30:49 发布

翻译最新推荐文章于 2025-10-08 14:30:49 发布 · 2.3k 阅读

前端开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用 jQuery 插件 jsonview.js 将 JSON 数据以可读性高的方式进行展示，适合开发者在调试和演示 JSON 结构时使用。通过引入 jsonview.js 文件并调用相关方法，可以轻松将复杂的 JSON 对象转换为清晰的 HTML 格式。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery JSONView</title>
	 <!--
			1. 下面的引入要放在head中
			2. jquery要在jquery.jsonview之前
	 -->
  <link rel="stylesheet" href="css/jquery.jsonview.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.jsonview.js"></script>
  <script type="text/javascript">
    var json = {
      "hey": "guy",
      "anumber": 243,
      "anobject": {
        "whoa": "nuts",
        "more":"stuff"
      },
      "awesome": true,
      "bogus": false,
      "meaning": null,
      "japanese":"明日がある。",
      "link": "http://jsonview.com",
      "notLink": "http://jsonview.com is great",
      "multiline": ['Much like me, you make your way forward,',
        'Walking with downturned eyes.',
        'Well, I too kept mine lowered.',
        'Passer-by, stop here, please.'].join("\n")
    };
    $(function() {
      $("#json").JSONView(json);

      $("#json-collapsed").JSONView(json, {collapsed: true, nl2br: true});

      $('#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>
  <h2>Data</h2>
  <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>
  <div id="json"></div>
  <h2>Data Collapsed</h2>
  <div id="json-collapsed"></div>
</body>
</html>