基于javascript的JSON格式页面展示美化方法_javascript技巧

{"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结合可实现页面展示转换

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索JSON格式
页面美化
javascript 美化、javascript美化工具、javascript在线美化、javascript 代码美化、json美化,以便于您获取更多的相关知识。

时间: 2024-10-16 03:05:30

基于javascript的JSON格式页面展示美化方法_javascript技巧的相关文章

基于JavaScript实现点击页面任何位置返回_javascript技巧

废话不多说了,直接上关键代码了. <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script&g

java与javascript之间json格式数据互转介绍_javascript技巧

javascript中对象与字符串的互转 对象转为字符串:通过JSON.encode方法,这个是json.js里面的方法,引入到当前文件就可以了. 字符串转换为对象:①使用JSON.decode方法,同上,引入js就可以了.②jQuery中有个方法,$.parseJson也可以实现. java中json字符串与对象的互转 对象转换为字符串:在struts2-json-plugin.jar中有个JsonUtil.serial方法.也可以自己自由定制,通过字符串拼接的方式实现,json字符串的属性一

实例详解JSON数据格式及json格式数据域字符串相互转换_javascript技巧

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 基础结构 JSON建构于两种结构: 1. "名称/值"对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash t

JavaScript实现打开链接页面的方式汇总_javascript技巧

在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面中打开链接,也可以定制打开页面的尺寸等等. <a href="javascript:window.open('http://www.google.com','_self') "> open a link 1</a><br/> 2.使用document.U

JavaScript基于自定义函数判断变量类型的实现方法_javascript技巧

本文实例讲述了JavaScript基于自定义函数判断变量类型的实现方法.分享给大家供大家参考,具体如下: 通常用typeof来判断js变量的类型,但很多时候仅仅typeof满足不了要求的. 我写了一个自定义函数来做这个事,判断的比较全面了. function varType(v){ if ( typeof v=== "object" ){ if (v=== null ) return 'null' ; if (v. constructor ) return (v. constructo

基于JavaScript实现瀑布流效果(循环渐近)_javascript技巧

1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container

基于JavaScript实现网页倒计时自动跳转代码_javascript技巧

用JS实现网页上的自动跳转功能,倒计时跳转至指定网页,倒计时间可自设,时间到则自动跳转到指定的网址,对于JS来说,实现该似乎挺简单哦,用IIS上的301也可实现跳转,以及mete标签也可以实现自动跳转,根据你自己的需要了. <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url)

基于JavaScript实现鼠标箭头移动图片跟着移动_javascript技巧

我们经常在一些网站上看到,鼠标在网页上移动,有一张图片跟着鼠标移动.大家知道这种效果是怎么做出来的吗?你可能感到比较复杂,其实他是用js编一段小程序来实现的,且代码简单,比较好理解.下面我就来分享下实现代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js鼠标移到</title>

JSON格式的键盘编码对照表_javascript技巧

整理了一份JSON格式的键盘编码对照表.欢迎转载,但请注明出处,谢谢! { VK_BACK: 8, //退格键 VK_TAB: 9, //TAB键 VK_RETURN: 13, //回车键 VK_SHIFT: 16, //Shift键 VK_CONTROL: 17, //Ctrl键 VK_MENU: 18, //Alt键 VK_PAUSE: 19, //Pause Break键 VK_CAPITAL: 20, //Caps Lock键 VK_SPACE: 32, //空格键 VK_PRIOR: