导航菜单
首页 > 网页制作 > HTML/Xhtml » 正文

html格式化输出JSON示例(测试接口)

后台-系统设置-扩展变量-手机广告位-内容正文顶部
本篇文章主要介绍了html格式化输出JSON示例(测试接口) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。

见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。

示例代码如下:

<html>    <head>        <meta charset="utf-8" />         <title>hello</title>         <style>            pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }            .string { color: green; }            .number { color: darkorange; }            .boolean { color: blue; }            .null { color: magenta; }            .key { color: red; }        </style>        <script type="text/javascript">        function syntaxHighlight(json) {            if (typeof json != 'string') {                json = JSON.stringify(json, undefined, 2);            }            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {                var cls = 'number';                if (/^"/.test(match)) {                    if (/:$/.test(match)) {                        cls = 'key';                    } else {                        cls = 'string';                    }                } else if (/true|false/.test(match)) {                    cls = 'boolean';                } else if (/null/.test(match)) {                    cls = 'null';                }                return '<span class="' + cls + '">' + match + '</span>';            });        }     </script>    </head>    <body>     <pre id="result">     </pre>    <script type="text/javascript">        var songResJson={                "service": "ALL",                "qt": 581,                "content": {                  "answer": {                    "song": "如果缘只到遇见",                    "album": "如果缘只到遇见",                    "artist": "吴奇隆 严艺丹",                    "pic_url": "http://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg"                 },                  "scene": "music"               }              }            document.getElementById('result').innerHTML = syntaxHighlight(songResJson);         // $('#result').html(syntaxHighlight(songResJson));    </script>         </body></html> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏此文 赞一个 ( ) 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
后台-系统设置-扩展变量-手机广告位-内容正文底部

相关推荐:

留言与评论(共有 0 条评论)
   
验证码:
二维码