关闭

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

553人阅读 评论(0) 收藏 举报

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

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

举个简单的例子:

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包,下载http://www.json.org/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包 http://www.json.org/java/index.html 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);    
    }  
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JavaScript -- 使用JavaScript解析JSON格式的字符串

JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。具...
  • u010926176
  • u010926176
  • 2015-06-10 15:11
  • 1464

json进阶(一)js读取解析JSON类型数据

js读取解析JSON类型数据 一、什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2015-07-23 19:18
  • 51569

超详细JSON解析步骤

JSON简介 JAVAScript Object Notation是一种轻量级的数据交换格式具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得...
  • miaozhenzhong
  • miaozhenzhong
  • 2016-09-19 14:58
  • 20779

C++解析json数据

使用C++处理JSON数据交换格式 一、摘要     JSON的全称为:JavaScript Object Notation,顾名思义,JSON是用于标记Javascript对象的,JSON官方的...
  • u011090298
  • u011090298
  • 2015-04-26 16:32
  • 980

复杂json数据的解析

之前写过一篇  GSON解析json数据总结 现在附载一篇整合复杂多层嵌套的json数据解析总结 解析复杂实例一: { "data": { "fee...
  • playsit
  • playsit
  • 2016-09-07 17:59
  • 1546

解析JSON格式数据常见方法

待解析的JSON格式的文件如下:     [{"id":"5", "version":"1.0", "name":"xiaowang"},     {"id&...
  • Xurns
  • Xurns
  • 2016-06-06 09:10
  • 5237

Java解析Json数据的两种方式

JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量,所以使用越来越广泛,下面介绍使用JsonObject和JsonArray的两种方式解析Json数据。 使用以上两种方式解析json...
  • chenfengdejuanlian
  • chenfengdejuanlian
  • 2016-08-12 12:36
  • 17800

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

JavaScript如何处理解析JSON数据详解
  • qq_26676207
  • qq_26676207
  • 2017-01-10 21:07
  • 195

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

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON...
  • Mr_Pang
  • Mr_Pang
  • 2015-12-28 19:07
  • 300

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

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JS...
  • doutao6677
  • doutao6677
  • 2016-05-03 14:13
  • 204
    个人资料
    • 访问:89095次
    • 积分:1516
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:90篇
    • 译文:13篇
    • 评论:9条
    最新评论