집 > 기사 > 웹 프론트엔드 > HTML 형식의 json 예제 코드

HTML 형식의 json 예제 코드

零下一度원래의: 2017-05-25 11:41:552573검색

이 글에서는 주로 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>

데모와 같이 json 형식으로 표시

[관련 권장 사항]

1. 무료 h5 온라인 동영상 튜토리얼

2. HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML 형식의 json 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：H5를 활용한 휴대폰 흔들림 구현 사례에 대한 자세한 설명다음 기사：H5를 활용한 휴대폰 흔들림 구현 사례에 대한 자세한 설명