1. <form id='VJjI73'></form>
        <bdo id='VJjI73'><sup id='VJjI73'><div id='VJjI73'><bdo id='VJjI73'></bdo></div></sup></bdo>

          • 首页 > 网页教程 > JavaScript > JavaScript如何处理解析JSON数据详解

            JavaScript如何处理解析JSON数据详解

            时间:2012-09-24    来源:互联网

            JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

            JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。具体细节参考

            举个简单的例子:

            js 代码

            function showJSON() {    
                var user =    
                {    
                "username":"andy",    
                "age":20,    
                "info": { "tel": "123456", "cellphone": "98765"},    
                "address":    
                [    
                {"city":"beijing","postcode":"222333"},    
                {"city":"newyork","postcode":"555666"}    
                ]    
                }    
                
                alert(user.username);    
                alert(user.age);    
                alert(user.info.cellphone);    
                alert(user.address[0].city);    
                alert(user.address[0].postcode);    
                }   

            这表示一个user对象,拥有username, age, info, address 等属性。

            同样也可以用JSON来简单的修改数据,修改上面的例子

            js 代码

            function showJSON() {    
                var user =    
                {    
                "username":"andy",    
                "age":20,    
                "info": { "tel": "123456", "cellphone": "98765"},    
                "address":    
                [    
                {"city":"beijing","postcode":"222333"},    
                {"city":"newyork","postcode":"555666"}    
                ]    
                }    
                
                alert(user.username);    
                alert(user.age);    
                alert(user.info.cellphone);    
                alert(user.address[0].city);    
                alert(user.address[0].postcode);    
                
                user.username = "Tom";    
                alert(user.username);    
                }  

            JSON提供了json.js包,下载 后,将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

            js 代码

            function showCar() {    
                var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");    
                alert(carr.toJSONString());    
                }    
                
                function Car(make, model, year, color)        {    
                this.make   =   make;    
                this.model   =   model;    
                this.year   =   year;    
                this.color   =   color;    
                } 

            可以使用eval来转换JSON字符到Object

            js 代码

            function myEval() {    
                var str = '{ "name": "Violet", "occupation": "character" }';    
                var obj = eval('(' + str + ')');    
                alert(obj.toJSONString());    
                }    

            或者使用parseJSON()方法

            js 代码

            function myEval() {    
                var str = '{ "name": "Violet", "occupation": "character" }';    
                var obj = str.parseJSON();    
                alert(obj.toJSONString());    
                }  

            下面使用prototype写一个JSON的ajax例子。

            先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话 

            java 代码

            response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");   

            再在页面中写一个ajax的请求

            js 代码

            function sendRequest() {    
                var url = "/MyWebApp/JSONTest1";    
                var mailAjax = new Ajax.Request(    
                url,    
                {    
                method: 'get',    
                onComplete: jsonResponse    
                }    
                );    
                }    
                
                function jsonResponse(originalRequest) {    
                alert(originalRequest.responseText);    
                var myobj = originalRequest.responseText.parseJSON();    
                alert(myobj.name);    
                } 

            prototype-1.5.1.js中提供了JSON的方法,String.evalJSON(), 可以不使用json.js, 修改上面的方法

            js 代码

            function jsonResponse(originalRequest) {    
                alert(originalRequest.responseText);    
                var myobj = originalRequest.responseText.evalJSON(true);    
                alert(myobj.name);    
                }    

            JSON还提供了java的jar包  API也很简单,下面举个例子

            在javascript中填加请求参数

            js 代码

            function sendRequest() {    
                var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");    
                var pars = "car=" + carr.toJSONString();    
                
                var url = "/MyWebApp/JSONTest1";    
                var mailAjax = new Ajax.Request(    
                url,    
                {    
                method: 'get',    
                parameters: pars,    
                onComplete: jsonResponse    
                }    
                );    
                }    

            使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)

            java 代码

            private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {    
                String s3 = request.getParameter("car");    
                try {    
                JSONObject jsonObj = new JSONObject(s3);    
                System.out.println(jsonObj.getString("model"));    
                System.out.println(jsonObj.getInt("year"));    
                } catch (JSONException e) {    
                e.printStackTrace();    
                }    
                response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");    
                }    
                

            同样可以使用JSONObject生成JSON字符串,修改servlet

            java 代码

            private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {    
                String s3 = request.getParameter("car");    
                try {    
                JSONObject jsonObj = new JSONObject(s3);    
                System.out.println(jsonObj.getString("model"));    
                System.out.println(jsonObj.getInt("year"));    
                } catch (JSONException e) {    
                e.printStackTrace();    
                }    
                
                JSONObject resultJSON = new JSONObject();    
                try {    
                resultJSON.append("name", "Violet")    
                .append("occupation", "developer")    
                .append("age", new Integer(22));    
                System.out.println(resultJSON.toString());    
                } catch (JSONException e) {    
                e.printStackTrace();    
                }    
                response.getWriter().print(resultJSON.toString());    
                }    
                js 代码
                function jsonResponse(originalRequest) {    
                alert(originalRequest.responseText);    
                var myobj = originalRequest.responseText.evalJSON(true);    
                alert(myobj.name);    
                alert(myobj.age);    
                }  

            参考

            相关推荐
            用javascript把XML解析为JSON的方法
            用JavaScript处理JSON数据的代码实例
            在JavaScript中将JSON的字符串解析成JSON数据格式的两种方法
            JavaScript新手教程之JSON的使用全解(超详细)
            JS教程:NodeList集合跟Array数组的区别
            用JavaScript实现表单验证电话号码的代码实例
            用正则表达式实现JavaScript表单验证中文大写字母
            10个超级实用的javascript动画框架分享
            12个Ajax学习者必备的优秀网站
            超棒的JavaScript 框架、工具和技术教程分享
            文件上传控件SWFUpload使用指南分享
            多文件上传控件plupload的使用心得分享
            你可能不知道的一些JavaScript“奇技淫巧”
            JavaScript编程中的for与in循环的用法实例
            用JS代码简单实现checkbox的全选与反选
            如何处理JS的'null'为空或不是对象
            用javascript代码实现对浏览器判断的思路
            25款有趣好玩的JavaScript小游戏
            JS代码的window.location属性详解
            用Js操作Cookie的代码教程附有详细注释
            深入理解JavaScript的caller,callee,call,apply函数
            获取Javscript执行函数名称的代码实例
            JavaScript的split函数详解及代码实例
            新手教程:107条Javascript的常用语句
            js禁用下拉框的代码实例
            js编程经验分享 原始Ajax与jQuery中的Ajax比较
            Javascript新手教程:从入门到精通(完整版)
            10款基于Javascript的超酷绘画和画布类库
            网页制作web开发中常用的javascript表单验证函数分享

            精彩推荐

            热门教程