基于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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
详解 TypeScript 枚举类型
Nov 02 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
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
详解vue-router基本使用
2017/04/18 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python 产生token及token验证的方法
2018/12/26 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
企业新年寄语
2014/04/04 职场文书
1亿有多大教学反思
2014/05/01 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
个人作风建设总结
2014/10/23 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
十月围城观后感
2015/06/08 职场文书
工作感言一句话
2015/08/01 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
goland 设置project gopath的操作
2021/05/06 Golang