JavaScript中使用JSON

最新推荐文章于 2022-04-20 17:27:07 发布

转载最新推荐文章于 2022-04-20 17:27:07 发布 · 521 阅读

JSP/PHP/SQL/NodeJS 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中使用JSON对象进行数据解析与序列化，并特别关注了JSON字符串中汉字的Unicode编码方法，确保数据传输与存储的正确性和兼容性。

虽说JavaScript原生支持JSON，但真用到的时候，也遇到了一些麻烦。下面整理一些JSON相关的JS程序。

1. 将JSON字串解析为对象

最简单的方法是使用eval：

1

2

3

 
        var 
         jsonStr = 
        '{ "name": "幼学笔记", "url": "oncoding.cn" }'
        ; 
        //定义一个json字符串
       
 
        var 
         jsonObj = eval( 
        '(' 
         + jsonStr + 
        ')' 
         ); 
        //使用eval解析成对象
       
 
        console.log(jsonObj);
       

但如果JSON字符串不严谨或被利用漏洞，eval会产生一些隐患，这是可以使用JSON解析器JSON.parse()进行解析。

需要引入这个 json2.js 文件（必须下载到本地目录，去掉第一行，Crockford太小气了：）。

 
        var 
         jsonObj = JSON.parse(jsonStr, 
        function 
         (key, value) {
       
        var 
         type;
       
        if 
         (value && 
        typeof 
         value === 
        'object'
        ) {
       
        type = value.type;
       
        if 
         (
        typeof 
         type === 
        'string' 
         && 
        typeof 
         window[type] === 
        'function'
        ) {
       
        return 
         new 
         (window[type])(value);
       
        }
       
        }
       
        return 
         value;
       
        });

2. 将JS对象转换为JSON字串

这其实就是一个遍历对象，组装成字符串的过程。json2.js中也有对应的方法JSON.stringify，用法为：

1

2

3

 
        var 
         jsonStr= JSON.stringify(jsonObj , 
        function 
         (key, value) {
       
        return 
         value;
       
        });

3. jQuery

Fdream写的一个jQuery扩展可以实现以上两种操作。

 
        /**
       
        * extension of JSON, type for jQuery
       
        * AUTHOR: xushengs@gmail.com
       
        * LICENSE:  http://www.opensource.org/licenses/mit-license.php
       
        * WEBSITE:  http://ooboy.net/
       
        */
       
        (
        function
        ($){
       
        // the code of this function is from 
       
        //  http://lucassmith.name/pub/typeof.html
       
        $.type = 
        function
        (o){
       
        var 
         _toS = Object.prototype.toString;
       
        var 
         _types = {
       
        'undefined'
        : 
        'undefined'
        ,
       
        'number'
        : 
        'number'
        ,
       
        'boolean'
        : 
        'boolean'
        ,
       
        'string'
        : 
        'string'
        ,
       
        '[object Function]'
        : 
        'function'
        ,
       
        '[object RegExp]'
        : 
        'regexp'
        ,
       
        '[object Array]'
        : 
        'array'
        ,
       
        '[object Date]'
        : 
        'date'
        ,
       
        '[object Error]'
        : 
        'error'
       
        };
       
        return 
         _types[
        typeof 
         o] || _types[_toS.call(o)] || (o ? 
        'object' 
         : 
        'null'
        );
       
        };
       
        // the code of these two functions is from mootools
       
        //  http://mootools.net
       
        var 
         $specialChars = {
       
        '\b'
        : 
        '\\b'
        ,
       
        '\t'
        : 
        '\\t'
        ,
       
        '\n'
        : 
        '\\n'
        ,
       
        '\f'
        : 
        '\\f'
        ,
       
        '\r'
        : 
        '\\r'
        ,
       
        '"'
        : 
        '\\"'
        ,
       
        '\\'
        : 
        '\\\\'
       
        };
       
        var 
         $replaceChars = 
        function
        (chr){
       
        return 
         $specialChars[chr] || 
        '\\u00' 
         + Math.floor(chr.charCodeAt() / 16).toString(16) + (chr.charCodeAt() % 16).toString(16);
       
        };
       
        $.toJSON = 
        function
        (o){
       
        var 
         s = [];
       
        switch 
         ($.type(o)) {
       
        case 
         'undefined'
        :
       
        return 
         'undefined'
        ;
       
        break
        ;
       
        case 
         'null'
        :
       
        return 
         'null'
        ;
       
        break
        ;
       
        case 
         'number'
        :
       
        case 
         'boolean'
        :
       
        case 
         'date'
        :
       
        case 
         'function'
        :
       
        return 
         o.toString();
       
        break
        ;
       
        case 
         'string'
        :
       
        return 
         '"' 
         + o.replace(/[\x00-\x1f\\"]/g, $replaceChars) + 
        '"'
        ;
       
        break
        ;
       
        case 
         'array'
        :
       
        for 
         (
        var 
         i = 0, l = o.length; i < l; i++) {
       
        s.push($.toJSON(o[i]));
       
        }
       
        return 
         '[' 
         + s.join(
        ','
        ) + 
        ']'
        ;
       
        break
        ;
       
        case 
         'error'
        :
       
        case 
         'object'
        :
       
        for 
         (
        var 
         p 
        in 
         o) {
       
        s.push(
        '\"' 
         + p + 
        '\"' 
         + 
        ':' 
         + $.toJSON(o[p]));
       
        }
       
        return 
         '{' 
         + s.join(
        ','
        ) + 
        '}'
        ;
       
        break
        ;
       
        default
        :
       
        return 
         ''
        ;
       
        break
        ;
       
        }
       
        };
       
        $.evalJSON = 
        function
        (s){
       
        if 
         ($.type(s) != 
        'string' 
         || !s.length) 
       
        return 
         null
        ;
       
        return 
         eval(
        '(' 
         + s + 
        ')'
        );
       
        };
       
        })(jQuery);

使用方法：

1	`var` `jsonStr = $.toJSON(jsonData);`

1	`var` `jsonData= $.jsonStr(jsonStr);`

4. JSON的汉字问题

以上方法生成的JSON字串中的汉字都是未经转义的。虽然一般不会影响正常使用，但因为涉及到不同语言之间的传输、存储，有时候还需要对汉字进行unicode编码。

JavaScriptunicode编码函数：

 
        function 
         unicode(str){
       
        var 
         a = [], i = 0;
       
        for 
         (; i < str.length;) {
       
        var 
         strr = str[i];
       
        if
        (check(strr)){
       
        a[i] = 
        "\\u"
        +(
        "00" 
         + str.charCodeAt(i).toString(16)).slice( - 4);
       
        //alert(a[i]);
       
        }
       
        else
        {
       
        a[i] = strr;
       
        }
       
        i++;
       
        }
       
        return 
         (a.join(
        ""
        ));
       
        }