JSON辅助格式化处理方法
平时服务器端开发人员写好后台之后一般写一份简单的接口说明页面，类似：
代码如下:
<form action="test.php" accept-charset="utf-8">
<div><label for="">param_1</label><input type="text" name="param_1" value="value_1"/></div>
<div><label for="">param_2</label><input type="text" name="param_2" value="value_2"/></div>
<div><label for="">param_3</label><input type="text" name="param_3" value="value_3"/></div>
<div><label for="">param_4</label><input type="text" name="param_4" value="value_4"/></div>
<div><input type="submit" value="submit"/></div>
</form>
由于结果是以json形式返回的，不容易一眼辨认，所以为了方便，对结果进行了简单的处理：
1,由于不能控制返回结果的页面，所以直接对请求进行了拦截并用ajax方式进行重发。
2,格式化返回的json结果，非json结果直接显示。
注：ubuntu下的chromium在处理overflow的问题上貌似有点不一样，所以结果容器写得有点罗嗦。
具体例子：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="page">
<form action="test.php" accept-charset="utf-8">
<div><label for="">param_1</label><input type="text" name="param_1" value="value_1"/></div>
<div><label for="">param_2</label><input type="text" name="param_2" value="value_2"/></div>
<div><label for="">param_3</label><input type="text" name="param_3" value="value_3"/></div>
<div><label for="">param_4</label><input type="text" name="param_4" value="value_4"/></div>
<div><input type="submit" value="submit"/></div>
</form>
</div>
<script type="text/javascript" src="../js/jQuery.js"></script>
<script type="text/javascript" src="../js/JSONFormat.js"></script>
</body>
</html>
View Code
var JSONFormat = (function(){
var _toString = Object.prototype.toString;
function format(object, indent_count){
var html_fragment = '';
switch(_typeof(object)){
case 'Null' :0
html_fragment = _format_null(object);
break;
case 'Boolean' :
html_fragment = _format_boolean(object);
break;
case 'Number' :
html_fragment = _format_number(object);
break;
case 'String' :
html_fragment = _format_string(object);
break;
case 'Array' :
html_fragment = _format_array(object, indent_count);
break;
case 'Object' :
html_fragment = _format_object(object, indent_count);
break;
}
return html_fragment;
};
function _format_null(object){
return '<span class="json_null">null</span>';
}
function _format_boolean(object){
return '<span class="json_boolean">' + object + '</span>';
}
function _format_number(object){
return '<span class="json_number">' + object + '</span>';
}
function _format_string(object){
if(0 <= object.search(/^http/)){
object = '<a href="' + object + '" target="_blank" class="json_link">' + object + '</a>'
}
return '<span class="json_string">"' + object + '"</span>';
}
function _format_array(object, indent_count){
var tmp_array = [];
for(var i = 0, size = object.length; i < size; ++i){
tmp_array.push(indent_tab(indent_count) + format(object[i], indent_count + 1));
}
return '[\n'
+ tmp_array.join(',\n')
+ '\n' + indent_tab(indent_count - 1) + ']';
}
function _format_object(object, indent_count){
var tmp_array = [];
for(var key in object){
tmp_array.push( indent_tab(indent_count) + '<span class="json_key">"' + key + '"</span>:' + format(object[key], indent_count + 1));
}
return '{\n'
+ tmp_array.join(',\n')
+ '\n' + indent_tab(indent_count - 1) + '}';
}
function indent_tab(indent_count){
return (new Array(indent_count + 1)).join(' ');
}
function _typeof(object){
var tf = typeof object,
ts = _toString.call(object);
return null === object ? 'Null' :
'undefined' == tf ? 'Undefined' :
'boolean' == tf ? 'Boolean' :
'number' == tf ? 'Number' :
'string' == tf ? 'String' :
'[object Function]' == ts ? 'Function' :
'[object Array]' == ts ? 'Array' :
'[object Date]' == ts ? 'Date' : 'Object';
};
function loadCssString(){
var style = document.createElement('style');
style.type = 'text/css';
var code = Array.prototype.slice.apply(arguments).join('');
try{
style.appendChild(document.createTextNode(code));
}catch(ex){
style.styleSheet.cssText = code;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
loadCssString(
'.json_key{ color: purple;}',
'.json_null{color: red;}',
'.json_string{ color: #077;}',
'.json_link{ color: #717171;}',
'.json_array_brackets{}');
var _JSONFormat = function(origin_data){
this.data = 'string' != typeof origin_data ? origin_data :
JSON && JSON.parse ? JSON.parse(origin_data) : eval('(' + origin_data + ')');
};
_JSONFormat.prototype = {
constructor : JSONFormat,
toString : function(){
return format(this.data, 1);
}
}
return _JSONFormat;
})();
function create_result_contatiner(){
var $result = $('<pre id="result" style=" width: 100%; height: 100%; overflow: scroll; overflow-x: scroll; overflow-y:scroll"></pre>')
var $result_container = $('<div id="result_container" style="position: fixed; top: 1%; right: 8px; width: 5%; height: 97%; margin: 0; padding: 0; border:1px solid skyblue; background: #f8f8f8; line-height: 1.2em; font-size: 14px; cursor: pointer;"></div>');
$result_container.append($result);
$result_container.hover(function(){
$(this).stop(true).animate({width:'50%'}, 'slow');
}, function(){
$(this).stop(true).animate({width:'5%'}, 'slow');
});
$('body').append($result_container);
return [$result_container, $result];
}
(function request_intercept(args){
var $result_container = args[0],
$result = args[1];
$('form *[type="submit"]').bind('click', function(){
var _form = $(this).parents('form'),
_action = (_form.attr('action') || './'),
_method = (_form.attr('method') || 'get').toLowerCase(),
_params = {};
_form.find('input[type="text"]').each(function(){
var item = $(this);
_params[item.attr('name')] = item.val();
});
$['get' == _method ? 'get' : 'post'](_action, _params, function(response){
try{
var j = new JSONFormat(JSON && JSON.parse ? JSON.parse(response) : eval('(' + response + ')'));
$result.html(j.toString());
}catch (e){
$result.html($result.text(response).html());
}
$result_container.stop(true).animate({width:'50%'}, 'slow');
});
return false;
});
})(create_result_contatiner());
相关推荐
-
JS处理json日期格式化问题
起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,这让我们感觉很不爽,我们不可能为了这东西,把所有日期字段都变成string吧,所以,找了一个JS的扩展方法,来实现这个功能 实现 function ChangeDateFormat(jsondate) { jsondate = jsondate.replace("/Date(", "").replace(")/", ""); if (j
-
asp.net中各种类型的JSON格式化
复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.Data; using System.Reflection; using System.Collections; using System.Data.Common; public class ConvertJson { #region 私有方法 /// <summary> /// 过滤特殊字符 /// </s
-
python自动格式化json文件的方法
本文实例讲述了python自动格式化json文件的方法.分享给大家供大家参考.具体如下: 这里主要实现将代码混乱的json文件格式化. 还有一小堆python常用算法代码 完整实例代码点击此处本站下载. class JsonFormatter: def __init__(self,intend=4,name=""): self.name=name self.intend=intend self.stack=[] self.obj=None self.source=self.get_so
-
json格式化/压缩工具 Chrome插件扩展版
安装方法:用chrome浏览器访问 https://chrome.google.com/extensions/detail/pjkoglpbigbjijmncfkcpkcpddnelgbm?hl=zh-cn [json格式化/压缩]工具 chrome下安装 :) 1.建一个新的文件夹 2.建一个名为 manifest.json的文件 3.打开这个 manifest.json文件,可以理解为配置文件 :) 包含以下内容 复制代码 代码如下: { "name": "My Firs
-
JSON格式化输出
今天有个需求是对输出的JSON进行格式化 首先想到的就是jsBeautifier之类的小插件 搜索了一番看到有一位朋友回答JSON.stringify可以输出格式化的JSON字符串 复制代码 代码如下: JSON.stringify(jsObj, null, "\t"); // 缩进一个tab JSON.stringify(jsObj, null, 4); // 缩进4个空格 唔,不错 PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用: 在线J
-
javascript格式化json显示实例分析
本文实例讲述了javascript格式化json显示方法.分享给大家供大家参考.具体分析如下: 将json对象或者json字符串格式化方便在网页上限制 var formatJson = function(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ''; //one can also use '\t' or a different number of spaces // optional settings
-
使用正则表达式的格式化与高亮显示json字符串
json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. 复制代码 代码如下: if (typeof json !== 'string') { json = JSON.string
-
JSON辅助格式化处理方法
平时服务器端开发人员写好后台之后一般写一份简单的接口说明页面,类似: 复制代码 代码如下: <form action="test.php" accept-charset="utf-8"> <div><label for="">param_1</label><input type="text" name="param_1" value="valu
-
JavaScript格式化json和xml的方法示例
本文实例讲述了JavaScript格式化json和xml的方法.分享给大家供大家参考,具体如下: 格式化json实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> </head> <body> <!--格式化后的json写入的位
-
Swift实现JSON转Model的方法及HandyJSON使用讲解
背景: 很多时候,我们从服务端请求下的数据都是Json格式,我们需要拿这些数据显示到我们的UI界面. 因此,我们的做法基本都会先将json转为方便使用的数据模型,或者也可以直接转字典解决. 在OC中,我们有很多优秀的第三方库帮助我们实现,比如MJExtension.JSONModel等,这些库基本都是利用runtime实现读取属性名并利用kvc重新赋值属性. 在Swift中,由于runtime的局限,比较出名的有SwiftyJSON.ObjectMapper等. 其中: 1.SwiftyJSON
-
Python使用内置json模块解析json格式数据的方法
本文实例讲述了Python使用内置json模块解析json格式数据的方法.分享给大家供大家参考,具体如下: Python中解析json字符串非常简单,直接用内置的json模块就可以,不需要安装额外的模块. 一.json字符串转为python值 json字符串: 复制代码 代码如下: {"userAccount":"54321","date":"2016-12-06 10:26:17","ClickTime"
-
C# web api返回类型设置为json的两种方法
web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面就介绍两种方法: 方法一:(改配置法) 找到Global.asax文件,在Application_Start()方法中添加一句: 复制代码 代码如下: GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear(); 修改后: 复制代码 代码如下: protected void
-
golang实现sql结果集以json格式输出的方法
本文实例讲述了golang实现sql结果集以json格式输出的方法.分享给大家供大家参考,具体如下: 复制代码 代码如下: func getJSON(sqlString string) (string, error) { stmt, err := db.Prepare(sqlString) if err != nil { return nil, err } defer stmt.Close() rows, err := stmt.Query
-
C#实现集合转换成json格式数据的方法
本文实例讲述了C#实现集合转换成json格式数据的方法.分享给大家供大家参考,具体如下: /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string ToJson(DataTable dt) { if (dt != null
-
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.使用
-
js中把JSON字符串转换成JSON对象最好的方法
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用jQuery的each方法来遍历 用jQuery解析JSON数据的方法,作为jQuery异步请求的传输对象,jQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里
-
js获取json元素数量的方法
本文实例讲述了js获取json元素数量的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script> var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"} function JSONLength(obj) { var size = 0, key; for