一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery.json使用方法

时间:2011-08-30 编辑:简简单单 来源:一聚教程网

今天突然看到了园子里使用的jQuery.json,把源码复制在这里,以后会有用,免得忘了。
这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明

(function($) {
    $.toJSON = function(o)
    {
        if (typeof (JSON) == 'object' && JSON.stringify)
            return JSON.stringify(o);
        var type = typeof (o);
        if (o === null)
            return "null";
        if (type == "undefined")
            return undefined;
        if (type == "number" || type == "boolean")
            return o + "";
        if (type == "string")
            return $.quoteString(o);
        if (type == 'object')
        {
            if (typeof o.toJSON == "function")
                return $.toJSON(o.toJSON());
            if (o.constructor === Date)
            {
                var month = o.getUTCMonth() + 1;
                if (month < 10)
                    month = '0' + month;
                var day = o.getUTCDate();
                if (day < 10)
                    day = '0' + day;
                var year = o.getUTCFullYear();
                var hours = o.getUTCHours();
                if (hours < 10)
                    hours = '0' + hours;
                var minutes = o.getUTCMinutes();
                if (minutes < 10)
                    minutes = '0' + minutes;
                var seconds = o.getUTCSeconds();
                if (seconds < 10)
                    seconds = '0' + seconds;
                var milli = o.getUTCMilliseconds();
                if (milli < 100)
                    milli = '0' + milli;
                if (milli < 10)
                    milli = '0' + milli;
                return '"' + year + '-' + month + '-' + day + 'T' +
                hours + ':' + minutes + ':' + seconds + '.' + milli + 'Z"';
            }
            if (o.constructor === Array)
            {
                var ret = [];
                for (var i = 0; i < o.length; i++)
                    ret.push($.toJSON(o[i]) || "null");
                return "[" + ret.join(",") + "]";
            }
            var pairs = [];
            for (var k in o) {
                var name;
                var type = typeof k;
                if (type == "number")
                    name = '"' + k + '"';
                else if (type == "string")
                    name = $.quoteString(k);
                else
                    continue;
                if (typeof o[k] == "function")
                    continue;
                var val = $.toJSON(o[k]);
                pairs.push(name + ":" + val);
            }
            return "{" + pairs.join(", ") + "}";
        }
    };
    $.evalJSON = function(src)
    {
        if (typeof (JSON) == 'object' && JSON.parse)
            return JSON.parse(src);
        return eval("(" + src + ")");
    };
    $.secureEvalJSON = function(src)
    {
        if (typeof (JSON) == 'object' && JSON.parse)
            return JSON.parse(src);
        var filtered = src;
        filtered = filtered.replace(/["/bfnrtu]/g, '@');
        filtered = filtered.replace(/"[^"nr]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g, ']');
        filtered = filtered.replace(/(?:^|:|,)(?:s*[)+/g, '');
        if (/^[],:{}s]*$/.test(filtered))
            return eval("(" + src + ")");
        else
            throw new SyntaxError("Error parsing JSON, source is not valid.");
    };
    $.quoteString = function(string)
    {
        if (string.match(_escapeable))
        {
            return '"' + string.replace(_escapeable, function(a)
            {
                var c = _meta[a];
                if (typeof c === 'string')
                    return c;
                c = a.charCodeAt();
                return 'u00' + Math.floor(c / 16).toString(16) + (c % 16).toString(16);
            }) + '"';
        }
        return '"' + string + '"';
    };
    var _escapeable = /["x00-x1fx7f-x9f]/g;
    var _meta = {'b': 'b','t': 't','n': 'n','f': 'f','r': 'r','"': '"','': '\'};
})(jQuery);


再看一个利用json的实现城市联动的

 

var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'西安市'},
{name:'6102',value:'铜川市'},
{name:'6103',value:'宝鸡市'},
{name:'6104',value:'咸阳市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";

这里以jquery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。

1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:

var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}

//输出每个root子对象的名称和值

alert("name:"+item.name+",value:"+item.value);
})

注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:

$.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}

alert("name:"+item.name+",value:"+item.value);

});
});

热门栏目