基于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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP微信分享开发详解
2017/01/14 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
硕士研究生自我鉴定
2013/11/08 职场文书
自荐信格式简述
2014/01/25 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技