基于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 相关文章推荐
利用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