编程 Javascript

基于javascript的JSON格式页面展示美化方法

Posted in Javascript onJuly 02, 2014

{"name": "monkey","age": "24","height": 164.0}

如果想让以上json字符串在页面上展示的比较易读，即变成下面的style:

{ 
"name": "monkey", 
"age": "24", 
"height": 164.0cm 
}

本文介绍的方法基于javascript ，代码如下：

<html> 
<head>/ 
//style中是css代码 
<style type="text/css"> 
body 
{ 
white-space: pre; 
font-family: monospace; 
} 
</style> 
//script中是javascript代码 
<script> 
window.error_id_msgs = <%= error_id_msgs | raw %>; 
function myFunction() { 
document.body.innerHTML = ""; 
document.body.appendChild(document.createTextNode(JSON.stringify(window.error_id_msgs, null, 4))); 
}

　 
</script> 
</head> 
<body onload="myFunction()">　//表示页面加载时调用myFunction() 
</body> 
</html>

其中window.error_id_msgs是所要转换的json对象，css和myFunction结合可实现页面展示转换

基于javascript的JSON格式页面展示美化方法

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

利用jQuery 实现GridView异步排序、分页的代码

Feb 06 Javascript

formValidator3.3的ajaxValidator一些异常分析

Jul 12 Javascript

JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

Jun 21 Javascript

javascript cookie基础应用之记录用户名的方法

Sep 20 Javascript

微信小程序 Audio API详解及实例代码

Sep 30 Javascript

网络传输协议（http协议）

Nov 18 Javascript

AngularJS的ng-repeat指令与scope继承关系实例详解

Jan 21 Javascript

JS跨域请求的问题解析

Dec 03 Javascript

js作用域和作用域链及预解析

Apr 11 Javascript

swiper自定义分页器的样式

Sep 14 Javascript

解决Antd 里面的select 选择框联动触发的问题

Oct 24 Javascript

使用react-virtualized实现图片动态高度长列表的问题

May 28 Javascript

jQuery窗口、文档、网页各种高度的精确理解

Jul 02 #Javascript

JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果

Jul 02 #Javascript

jquery序列化表单以及回调函数的使用示例

Jul 02 #Javascript

IE8下Jquery获取select选中的值post到后台报错问题

Jul 02 #Javascript

js面向对象编程之如何实现方法重载

Jul 02 #Javascript

jquery.validate.js插件使用经验记录

Jul 02 #Javascript

escape编码与unescape解码汉字出现乱码的解决方法

Jul 02 #Javascript

You might like

PHP4中session登录页面的应用

2008/07/25 PHP

php通过文件头检测文件类型通用代码类（zip,rar等)

2010/10/19 PHP

PHP file_get_contents设置超时处理方法

2013/09/30 PHP

Yii框架获取当前controlle和action对应id的方法

2014/12/03 PHP

php实现监控varnish缓存服务器的状态

2014/12/30 PHP

php单链表实现代码分享

2016/07/04 PHP

CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

2009/02/14 Javascript

javascript IFrame 强制刷新代码

2009/07/23 Javascript

html 锁定页面(js遮罩层弹出div效果)

2009/10/27 Javascript

jQuery 树形结构的选择器

2010/02/15 Javascript

一个简单的js鼠标划过切换效果

2010/06/30 Javascript

javascript中的onkeyup和onkeydown区别介绍

2013/04/28 Javascript

基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

2013/05/07 Javascript

Javascript中对象继承的实现小例

2014/05/12 Javascript

js HTML5多图片上传及预览实例解析（不含前端的文件分割）

2016/08/26 Javascript

vue实现全选、反选功能

2020/11/17 Javascript

vue iview组件表格 render函数的使用方法详解

2018/03/15 Javascript

express默认日志组件morgan的方法

2018/04/05 Javascript

谈谈React中的Render Props模式

2018/12/06 Javascript

Jquery实现无缝向上循环滚动列表的特效

2019/02/13 jQuery

Vue监听滚动实现锚点定位(双向)示例

2019/11/13 Javascript

[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆

2014/07/15 DOTA

[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访

2015/12/26 DOTA

[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27

2020/11/30 DOTA

10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径

2019/08/12 Python

python闭包与引用以及需要注意的陷阱

2020/09/18 Python

Miller Harris官网：英国小众香水品牌

2020/09/24 全球购物

逻辑链路控制协议

2016/10/01 面试题

《藏戏》教学反思

2014/02/11 职场文书

平安校园建设方案

2014/05/02 职场文书

党的群众路线教育实践活动领导班子整改措施

2014/10/28 职场文书

杭州黄龙洞导游词

2015/02/10 职场文书

员工自我评价范文

2015/03/11 职场文书

2015年电话客服工作总结

2015/05/18 职场文书

Django框架中视图的用法

2022/06/10 Python

oracle delete误删除表数据后如何恢复

2022/06/28 Oracle