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:

[尚无相关文章]