基于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 命名空间以提高代码重用性
Nov 13 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
javascript常用方法汇总
Dec 02 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
详解vue-router导航守卫
Jan 19 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
使用PHP编写发红包程序
2015/07/22 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php搜索文件程序分享
2015/10/30 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
深入理解Node module模块
2018/03/26 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Python splitlines使用技巧
2008/09/06 Python
浅谈五大Python Web框架
2017/03/20 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
个人担保书格式范文
2014/05/12 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Python中的 enumerate和zip详情
2022/05/30 Python