html頁面 json格式化友好提示,WEB頁面JSON格式化顯示和應用小技巧

如果使用JSON作為參數，JSON格式化顯示在調試和簡單配置系統中會經常用到。這裡以PHP和JS為例子講解如何更友好的顯示JSON資料。

一 使用PHP來處理格式化顯示JSON和使用JS來處理格式化顯示JSON

先看下效果圖：

上面這種效果是在html元素

标簽中顯示的效果。通常我們拿到的資料是這種格式      

{"username":"myname","password":"xsdasi349r034rdfasdfsaasdfasdfa","gender":"male","age":"12"}

如果有經過轉義會是下面這種方式

{"username":"myname","password":"xsdasi349r034rdfasdfsaasdfasdfa","gender":"male","age":"12"}

無論使用哪種方式，最終轉化為标準無轉義JSON即可。

$userInfoJsonText = '{"username":"myname","password":"xsdasi349r034rdfasdfsaasdfasdfa","gender":"male","age":"12"}';

$userInfoPertyJsonText = json_encode(json_decode($userInfoJsonText), JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE);

将 userInfoPertyJsonText 包裹在

标簽中就是上面的效果了。JSON_PRETTY_PRINT意思是用空白字元格式化傳回的資料，自 PHP 5.4.0 起生效。JSON_UNESCAPED_UNICODE以字面編碼多位元組 Unicode 字元(預設是編碼成 uXXXX)， 自 PHP 5.4.0 起生效。兩者放在一起就是同時應用該參數。

二 在html标簽的textarea中格式化顯示JSON

效果圖如下：

在textarea标簽最重要一點就是将空白字元用"t"替換。比如下面一段代碼：

//html

{{json_encode($vehicleConfig['control_config'])}}

//js

var configHandle = $("#control_config");

configHandle.val(JSON.stringify(JSON.parse(configHandle.val()), null, "t"));

如果是要存儲表單内容，就要考慮将加入的格式化輔助字元去掉，可以像下面這樣處理：

//html

{{json_encode($vehicleConfig['control_config'])}}

//js

var control_config = JSON.stringify(JSON.parse($("#control_config").val()) );

這樣取到的json資料值就是幹淨的完整的值。

Tags: json

Related Posts:

[尚無相關文章]