JSON輔助格式化處理方法
更新時間：2013年03月26日 09:37:14 作者：
由于結(jié)果是以json形式返回的，不容易一眼辨認，所以為了方便，對結(jié)果進行了簡單的處理，接下來介紹下處理方法，感興趣的各位可以參考下哈
平時服務(wù)器端開發(fā)人員寫好后臺之后一般寫一份簡單的接口說明頁面，類似：
<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>
由于結(jié)果是以json形式返回的，不容易一眼辨認，所以為了方便，對結(jié)果進行了簡單的處理：
1,由于不能控制返回結(jié)果的頁面，所以直接對請求進行了攔截并用ajax方式進行重發(fā)。
2,格式化返回的json結(jié)果，非json結(jié)果直接顯示。
注：ubuntu下的chromium在處理overflow的問題上貌似有點不一樣，所以結(jié)果容器寫得有點羅嗦。
具體例子：
<!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>
結(jié)果：
JSONFormat.js內(nèi)容：
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());
復(fù)制代碼 代碼如下:
<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>
由于結(jié)果是以json形式返回的，不容易一眼辨認，所以為了方便，對結(jié)果進行了簡單的處理：
1,由于不能控制返回結(jié)果的頁面，所以直接對請求進行了攔截并用ajax方式進行重發(fā)。
2,格式化返回的json結(jié)果，非json結(jié)果直接顯示。
注：ubuntu下的chromium在處理overflow的問題上貌似有點不一樣，所以結(jié)果容器寫得有點羅嗦。
具體例子：
復(fù)制代碼 代碼如下:
<!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>
結(jié)果：
JSONFormat.js內(nèi)容：
復(fù)制代碼 代碼如下:
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());
相關(guān)文章
Jquery+asp.net后臺數(shù)據(jù)傳到前臺js進行解析的方法
我們經(jīng)常用jquery讀取后臺數(shù)據(jù)，后臺返回數(shù)據(jù)。后臺數(shù)據(jù)格式就有很多了，但是js里面沒有什么類型之分2014-05-05
json的定義、標(biāo)準(zhǔn)格式及json字符串檢驗
今天分享和總結(jié)一些json的基本定義、格式、字符串的格式，以及在做測試的時候使用json時做一些簡單的校驗2014-05-05
淺談JsonObject中的key-value數(shù)據(jù)解析排序問題
下面小編就為大家分享一篇淺談JsonObject中的key-value數(shù)據(jù)解析排序問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼
服務(wù)端向客戶端返回了一串JSON格式的數(shù)據(jù)。在有些時候，因為某些特殊的原因我們不知道原始的key值，因此我們此時無法象正常一樣通過key值，來獲取value值。這時我們必須循環(huán)讀取JSON對象數(shù)據(jù)。廢話少說，來看例子。2010-07-07
JSON我就要來了2008-06-06
用JSON做數(shù)據(jù)傳輸格式中的一些問題總結(jié)
Json 憑借其自身的優(yōu)勢，在Web數(shù)據(jù)處理方面已經(jīng)占據(jù)了一定的位置，這段時間涉及到用Json做為數(shù)據(jù)傳輸格式的項目有3個，其中有部分頁面就采用了Json 數(shù)據(jù)傳輸格式, 這里我總結(jié)下這段時間采用這種方式的一些問題總結(jié)2011-12-12
JSONP的最基本的原理是：動態(tài)添加一個<script>標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協(xié)議無關(guān)了。2015-09-09
由于結(jié)果是以json形式返回的，不容易一眼辨認，所以為了方便，對結(jié)果進行了簡單的處理，接下來介紹下處理方法，感興趣的各位可以參考下哈2013-03-03
如何實現(xiàn)json數(shù)據(jù)可視化詳解
最近在工作中開發(fā)一個內(nèi)部功能時碰到的一個需求，要把json數(shù)據(jù)在頁面上展示出來，平時瀏覽器會安裝jsonView這樣的擴展來看json數(shù)據(jù)，但是程序要用到的話該怎么辦呢？今天在網(wǎng)上搜索的時候，發(fā)現(xiàn)了這個小技巧，分享給大家，有需要的朋友們可以參考借鑒，下面來一起看看吧2016-11-11
XML的代替者----JSON...2007-07-07