html格式化json的实例代码-Tutorial H5-php.cn

html格式化json的实例代码

零下一度

Lepaskan： 2017-05-25 11:41:55

asal

2534 orang telah melayarinya

这篇文章主要介绍了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>

Salin selepas log masuk

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

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

Atas ialah kandungan terperinci html格式化json的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!