基于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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
javascript中闭包closure的深入讲解
Mar 03 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基础知识回顾
2012/08/16 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP数组实例详解
2016/06/26 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
用Python实现随机森林算法的示例
2017/08/24 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Python 实现一个简单的web服务器
2021/01/03 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
寒假思想汇报
2014/01/10 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
标准发言稿结尾
2019/07/18 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Mysql基础知识点汇总
2021/05/26 MySQL
python 进阶学习之python装饰器小结
2021/09/04 Python