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

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

赞 (0)

相关推荐

  • JavaScript解析json格式数据简单示例

    以下这串json数据用来存储预加载的图片路径: 复制代码 代码如下: var imgData = [     { name: "p1", src: "images/p1.jpg" },     { name: "p2", src: "images/p2.jpg" },     { name: "p3", src: "images/p3.jpg" },     { name: "

  • javascript json2 使用方法

    复制代码 代码如下: <script type="text/javascript" src="json2.js"></script> <script> //直接声明json数据结构 var myJSONObject = {"bindings": [ {"ircEvent": "PRIVMSG", "method": "newURI"

  • 用原生JavaScript实现jQuery的$.getJSON的解决方法

    今天在写一DEMO,其中用到了jQuery的$.getJSON方法,写完后发现整个DEMO中用到jQuery中的就这一个地方,但要引入一个jQuery实在不划算,于是就自己实现了一个简单版的,基本可以满足需求,现分享出来: 复制代码 代码如下: var $ = {    getJSON: function(url, params, callbackFuncName, callback){        var paramsUrl ="",            jsonp = this

  • javascript解析json实例详解

    本文实例讲述了javascript解析json的方法.分享给大家供大家参考.具体方法如下: 下载json库 http://www.json.org/json-zh.html自己找javascript的 或者直接去下面的 https://github.com/douglascrockford/JSON-js   php生成json格式 使用页面 复制代码 代码如下: <script src="scripts/json.js"></script>  alert(da

  • 用Json实现PHP与JavaScript间数据交换的方法详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简而论之,不管是xml还是json都是为了方便在客户端与服务器端交互数据的中转站,特别是用于对象型数据,比如最常见的数组. 下面将分别将数组从php传送给javascript,以及将数组从javascript传送给php示例说明,例子比较简单,明白概念即可.不管从php传送给javascript,还是javascript传送给php,json在传送之前都会将对象扁平化即一维化为字符串.PHP 向 Jav

  • 用javascript对一个json数组深度赋值示例

    <!DOCTYPE HTML> <html> <head> <title>test1</title> </head> <body> <script> var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", &quo

  • 使用javascript实现json数据以csv格式下载

    使用javascript实现json数据以csv格式下载

    摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: 复制代码 代码如下: <!DOCTYPE html> <html>     <title>download csv</title>     <head>         <script src="http://code.jquery.com/jqu

  • javascript解析json数据的3种方式

    3种方式解析json数据 复制代码 代码如下: var obj=eval("("+traItem.rel+")"); //性能不好 var obj = (new Function("return " + traItem.rel))(); var obj = JSON.parse(traItem.rel); //这个要求的格式比较严格

  • js获取json元素数量的方法

    本文实例讲述了js获取json元素数量的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script> var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"} function JSONLength(obj) { var size = 0, key; for

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • JavaScript解析JSON格式数据的方法示例

    本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数 function JsonText1() { var strJSON = "{'Name':'Kevin','Age':'23'}"; //得到的JSON var obj = eval("(" + strJSON + ")"); //转换后的JSON对象 alert(obj.Name); } 2.使用

  • PHP基于CURL发送JSON格式字符串的方法示例

    本文实例讲述了PHP基于CURL发送JSON格式字符串的方法.分享给大家供大家参考,具体如下: /* * post 发送JSON 格式数据 * @param $url string URL * @param $data_string string 请求的具体内容 * @return array * code 状态码 * result 返回结果 */ function post_json_data($url, $data_string) { $ch = curl_init(); curl_seto

  • Python基于pandas实现json格式转换成dataframe的方法

    本文实例讲述了Python基于pandas实现json格式转换成dataframe的方法.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 import re import json from bs4 import BeautifulSoup import pandas as pd import requests import os from pandas.io.json import json_normalize class image_str

  • vue如何实现Json格式数据展示

    目录 Json格式数据展示 vue解析json数据 Json格式数据展示 vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示 <span class="light">要高亮的内容</span> 在json数据中,如果有需要高亮的内容,用以上标签包起来(这个要处理数据实现了,组件里高亮样式可以根据需要自己修改) <

  • 使用JavaScript构建JSON格式字符串实现步骤

    如果你现在正在使用Restful API,并且你需要通过web项目来构建json格式字符串的响应,那么这篇文章将帮助你使用javascript来创建json格式字符串.这是非常有用的,我们将通过jQuery插件$.toJSON把数据对象转换为json格式. 使用JavaScript构建JSON格式字符串 JavaScript代码: 在这里包含了javascript代码.$("#form").submit(function(){}- delete_button是form标签的ID,我们通

  • 基于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

  • javascript将url解析为json格式的两种方法

    javascript将url解析为json格式的两种方法

    本文介绍了javascript将url解析为json格式的两种方法,分享给大家,具体如下: 方法一:最简单的方法,利用a标签来实现 function parseUrl(url){ var a=document.createElement('a'); a.href=url; return { protocol:a.protocol.replace(':',''), hostname:a.hostname, port:a.port, path:a.pathname, query:(()=>{ var

  • javascript将json格式数组下载为excel表格的方法

    实例如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery183.min.js"></script> <script type="text/javasc

  • javascript解析json格式的数据方法详解

    JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧. 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包.那么如何用JavaScript来解析json呢? 首先,科普一下json.在json中,有两种结构:对象和数组. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"

随机推荐