编程 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 相关文章推荐

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