如果使用JSON作为参数,JSON格式化显示在调试和简单配置系统中会经常用到。这里以PHP和JS为例子讲解如何更友好的显示JSON数据。

一 使用PHP来处理格式化显示JSON和使用JS来处理格式化显示JSON
先看下效果图:

上面这种效果是在html元素<pre>标签中显示的效果。通常我们拿到的数据是这种格式

{"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 包裹在 <pre></pre>标签中就是上面的效果了。JSON_PRETTY_PRINT意思是用空白字符格式化返回的数据,自 PHP 5.4.0 起生效。JSON_UNESCAPED_UNICODE以字面编码多字节 Unicode 字符(默认是编码成 uXXXX), 自 PHP 5.4.0 起生效。两者放在一起就是同时应用该参数。

二 在html标签的textarea中格式化显示JSON
效果图如下:

在textarea标签最重要一点就是将空白字符用"t"替换。比如下面一段代码:

//html
<textarea class="form-control" id="control_config" rows="32">{{json_encode($vehicleConfig['control_config'])}}</textarea>

//js
var configHandle = $("#control_config");
configHandle.val(JSON.stringify(JSON.parse(configHandle.val()), null, "t"));

如果是要存储表单内容,就要考虑将加入的格式化辅助字符去掉,可以像下面这样处理:

//html
<textarea class="form-control" id="control_config" rows="32">{{json_encode($vehicleConfig['control_config'])}}</textarea>

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

这样取到的json数据值就是干净的完整的值。

Tags: json

Related Posts:
  • [尚无相关文章]

Leave a Comment