JSON辅助格式化处理方法


Posted in Javascript onMarch 26, 2013

平时服务器端开发人员写好后台之后一般写一份简单的接口说明页面,类似:

<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>

结果:
JSON辅助格式化处理方法
JSONFormat.js内容:
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());
Javascript 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
html+css+js实现xp window界面及有关功能
Mar 26 #Javascript
jquery图片放大镜功能的实例代码
Mar 26 #Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 #Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 #Javascript
JS上传前预览图片实例
Mar 25 #Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
js实现上传图片之上传前预览图片
Mar 25 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
浅谈php提交form表单
2015/07/01 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
解决laravel session失效的问题
2019/10/14 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
浅析node.js的模块加载机制
2018/05/25 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
使用python实现接口的方法
2017/07/07 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python中Unittest框架的具体使用
2019/08/27 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
精彩自我鉴定
2014/01/16 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python