欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JSON輔助格式化處理方法

 更新時(shí)間:2013年03月26日 09:37:14   作者:  
由于結(jié)果是以json形式返回的,不容易一眼辨認(rèn),所以為了方便,對(duì)結(jié)果進(jìn)行了簡(jiǎn)單的處理,接下來(lái)介紹下處理方法,感興趣的各位可以參考下哈
平時(shí)服務(wù)器端開(kāi)發(fā)人員寫好后臺(tái)之后一般寫一份簡(jiǎn)單的接口說(shuō)明頁(yè)面,類似:
復(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形式返回的,不容易一眼辨認(rèn),所以為了方便,對(duì)結(jié)果進(jìn)行了簡(jiǎn)單的處理:
1,由于不能控制返回結(jié)果的頁(yè)面,所以直接對(duì)請(qǐng)求進(jìn)行了攔截并用ajax方式進(jìn)行重發(fā)。
2,格式化返回的json結(jié)果,非json結(jié)果直接顯示。
注:ubuntu下的chromium在處理overflow的問(wèn)題上貌似有點(diǎn)不一樣,所以結(jié)果容器寫得有點(diǎn)羅嗦。
具體例子:
復(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后臺(tái)數(shù)據(jù)傳到前臺(tái)js進(jìn)行解析的方法

    Jquery+asp.net后臺(tái)數(shù)據(jù)傳到前臺(tái)js進(jìn)行解析的方法

    我們經(jīng)常用jquery讀取后臺(tái)數(shù)據(jù),后臺(tái)返回?cái)?shù)據(jù)。后臺(tái)數(shù)據(jù)格式就有很多了,但是js里面沒(méi)有什么類型之分
    2014-05-05
  • json的定義、標(biāo)準(zhǔn)格式及json字符串檢驗(yàn)

    json的定義、標(biāo)準(zhǔn)格式及json字符串檢驗(yàn)

    今天分享和總結(jié)一些json的基本定義、格式、字符串的格式,以及在做測(cè)試的時(shí)候使用json時(shí)做一些簡(jiǎn)單的校驗(yàn)
    2014-05-05
  • 淺談JsonObject中的key-value數(shù)據(jù)解析排序問(wèn)題

    淺談JsonObject中的key-value數(shù)據(jù)解析排序問(wèn)題

    下面小編就為大家分享一篇淺談JsonObject中的key-value數(shù)據(jù)解析排序問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼

    javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼

    服務(wù)端向客戶端返回了一串JSON格式的數(shù)據(jù)。在有些時(shí)候,因?yàn)槟承┨厥獾脑蛭覀儾恢涝嫉膋ey值,因此我們此時(shí)無(wú)法象正常一樣通過(guò)key值,來(lái)獲取value值。這時(shí)我們必須循環(huán)讀取JSON對(duì)象數(shù)據(jù)。廢話少說(shuō),來(lái)看例子。
    2010-07-07
  • JSON學(xué)習(xí)筆記

    JSON學(xué)習(xí)筆記

    JSON我就要來(lái)了
    2008-06-06
  • 用JSON做數(shù)據(jù)傳輸格式中的一些問(wèn)題總結(jié)

    用JSON做數(shù)據(jù)傳輸格式中的一些問(wèn)題總結(jié)

    Json 憑借其自身的優(yōu)勢(shì),在Web數(shù)據(jù)處理方面已經(jīng)占據(jù)了一定的位置,這段時(shí)間涉及到用Json做為數(shù)據(jù)傳輸格式的項(xiàng)目有3個(gè),其中有部分頁(yè)面就采用了Json 數(shù)據(jù)傳輸格式, 這里我總結(jié)下這段時(shí)間采用這種方式的一些問(wèn)題總結(jié)
    2011-12-12
  • 深入分析jsonp協(xié)議原理

    深入分析jsonp協(xié)議原理

    JSONP的最基本的原理是:動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽,而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái),這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了。
    2015-09-09
  • JSON輔助格式化處理方法

    JSON輔助格式化處理方法

    由于結(jié)果是以json形式返回的,不容易一眼辨認(rèn),所以為了方便,對(duì)結(jié)果進(jìn)行了簡(jiǎn)單的處理,接下來(lái)介紹下處理方法,感興趣的各位可以參考下哈
    2013-03-03
  • 如何實(shí)現(xiàn)json數(shù)據(jù)可視化詳解

    如何實(shí)現(xiàn)json數(shù)據(jù)可視化詳解

    最近在工作中開(kāi)發(fā)一個(gè)內(nèi)部功能時(shí)碰到的一個(gè)需求,要把json數(shù)據(jù)在頁(yè)面上展示出來(lái),平時(shí)瀏覽器會(huì)安裝jsonView這樣的擴(kuò)展來(lái)看json數(shù)據(jù),但是程序要用到的話該怎么辦呢?今天在網(wǎng)上搜索的時(shí)候,發(fā)現(xiàn)了這個(gè)小技巧,分享給大家,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧
    2016-11-11
  • XML的代替者----JSON

    XML的代替者----JSON

    XML的代替者----JSON...
    2007-07-07

最新評(píng)論