html页面json,在html页面中展示JSON

方式一：以默认黑体显示Json字符串。

我们经常会遇到想调试看下返回的Json字符串正不正确，以前总是使用 alert(JsonUti.convertToString(data));

但是JsonUti方法要引用一个JsonToString.js文件，这样就导致我每个项目中都要在Script文件夹中放一个JsonToString.js文件，然后在Shared里面的模板中引用。

但其实这种返回的结果和 JSON本身的JSON.stringify显示方式是一样的。可以直接不必要那么麻烦去引用JsonToString.js文件，而直接通过JSON.stringify(res, null, 2) 这种方式调用即可。

其中res是要JSON化的对象，2是spacing 。

以上方式为方式一，显示时，所有字符以默认黑体显示，如果要想显示的更直观，清晰一点，建议采用以下方式二显示。

方式二：以彩色字体显示Json字符串

1.创建样式文件：

@*Json样式*@

1

3 .string{color:green; }

4 .number{color:darkorange; }

5 .boolean{color:blue; }

6 .null{color:magenta; }

7 .key{color:red; }

8 9

10

2.格式化Json方法

1

2

3 function syntaxHighlight(json) {

4 if (typeof json != 'string') {

5 json = JSON.stringify(json, undefined, 2);

6 }

7 json = json.replace(/&/g, '&').replace(//g, '>');

8 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

9 var cls = 'number';

10 if (/^"/.test(match)) {

11 if (/:$/.test(match)) {

12 cls = 'key';

13 } else {

14 cls = 'string';

15 }

16 } else if (/true|false/.test(match)) {

17 cls = 'boolean';

18 } else if (/null/.test(match)) {

19 cls = 'null';

20 }

21 return '' + match + '';

22 });

23 }

24

3.在html上添加一个

用户显示

4.在方法中添加调用方法：

$('#result').html(syntaxHighlight(data));

显示效果如下图：