基于javascript的JSON格式頁(yè)面展示美化方法
{"name": "monkey","age": "24","height": 164.0}
如果想讓以上json字符串在頁(yè)面上展示的比較易讀,即變成下面的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()"> //表示頁(yè)面加載時(shí)調(diào)用myFunction() </body> </html>
其中window.error_id_msgs是所要轉(zhuǎn)換的json對(duì)象,css和myFunction結(jié)合可實(shí)現(xiàn)頁(yè)面展示轉(zhuǎn)換
- 用Json實(shí)現(xiàn)PHP與JavaScript間數(shù)據(jù)交換的方法詳解
- 用原生JavaScript實(shí)現(xiàn)jQuery的$.getJSON的解決方法
- javascript json2 使用方法
- 使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載
- JavaScript解析json格式數(shù)據(jù)簡(jiǎn)單示例
- javascript解析json實(shí)例詳解
- 用javascript對(duì)一個(gè)json數(shù)組深度賦值示例
- javascript解析json數(shù)據(jù)的3種方式
- js獲取json元素?cái)?shù)量的方法
相關(guān)文章
詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法
這篇文章主要介紹了詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法,及利用各種限制條件對(duì)數(shù)組和字符串進(jìn)行過(guò)濾,需要的朋友可以參考下2016-03-03詳解JavaScript的Symbol類型、隱藏屬性、全局注冊(cè)表
這篇文章主要介紹了JavaScript的Symbol類型、隱藏屬性、全局注冊(cè)表,本文主要對(duì)其使用方法和使用場(chǎng)景做個(gè)簡(jiǎn)單的介紹,需要的朋友可以參考下2022-05-05javascript實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變層大小的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變層大小的方法,涉及javascript操作鼠標(biāo)事件及樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04layui 實(shí)現(xiàn)二級(jí)彈窗彈出之后 關(guān)閉一級(jí)彈窗的方法
今天小編就為大家分享一篇layui 實(shí)現(xiàn)二級(jí)彈窗彈出之后 關(guān)閉一級(jí)彈窗的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼
這篇文章介紹了js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼,有需要的朋友可以參考一下2013-11-11(跨瀏覽器基礎(chǔ)事件/瀏覽器檢測(cè)/判斷瀏覽器)經(jīng)驗(yàn)代碼分享
一些js代碼,自己備用的,高手不要笑話我。(跨瀏覽器基礎(chǔ)事件,瀏覽器檢測(cè),判斷瀏覽器的名稱、版本號(hào)、操作系統(tǒng))等等,很實(shí)用的,方便自己使用,感興趣的朋友可以了解下,希望本文對(duì)你有所幫助2013-01-01分享9點(diǎn)個(gè)人認(rèn)為比較重要的javascript 編程技巧
接觸和學(xué)習(xí)javascript也有3~4年了,真正牽扯到前后臺(tái)數(shù)據(jù)的交互,數(shù)據(jù)算法等高級(jí)編程知之甚少,甚至很少用,如果你問(wèn)我你知道js什么知識(shí)呢?我可能只能說(shuō)知道點(diǎn)jQuery的技巧,說(shuō)編程都談不上,所以需要把某一些技巧作為編程習(xí)慣固定下來(lái),免于以后有人問(wèn)我你知道什么?2015-04-04JavaScript函數(shù)調(diào)用經(jīng)典實(shí)例代碼
JavaScript提供了4種函數(shù)調(diào)用,一般形式的函數(shù)調(diào)用、作為對(duì)象的方法調(diào)用、使用 call 和 apply 動(dòng)態(tài)調(diào)用、使用 new 間接調(diào)用,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)調(diào)用的相關(guān)資料,需要的朋友可以參考下2021-12-12感覺(jué)很流暢的js實(shí)現(xiàn)的鍵盤控制(帶慣性)
感覺(jué)很流暢的js實(shí)現(xiàn)的鍵盤控制(帶慣性)...2007-06-06