七日打卡-js读取解析JSON类型数据

1,022 阅读5分钟

一、什么是JSON?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同时,JSON是 JavaScript 原生格式。非常适合于服务器与JavaScript 的交互。

二、为什么使用JSON而不是XML

他们都是这样说的:尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。

三、如何使用

下面代码是html代码片段,实现点击按钮解析json格式数据并alert内容

<input type="button" value="button" onclick="clicks();"/>

下面是js函数代码:

var json = {

   contry:{

    area:{

     man:"12万",

     women:"10万"

    }

   }

  };

//方式一:使用eval解析

  var obj = eval(json);

  alert(obj.constructor);

  alert(obj.contry.area.women);

  //方式二:使用Funtion函数

  var strJSON = "{name:'json name'}";//得到的JSON

  var obj = new Function("return" + strJSON)();//转换后的JSON对象

  alert(obj.name);//json name

  alert(obj.constructor);

  

//复杂一点的json数组数据的解析

  var value1 = [ 

    {"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},

     {"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},

    {"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}

     ]; 

  var obj1 = eval(value1);

  alert(obj1[0].c01);

 //复杂一点的json的另一种形式

  var value2 = {

     "list":[

      {"password":"1230","username":"coolcooldool"},

      {"password":"thisis2","username":"okokok"}

      ],

     "array":[

      {"password":"1230","username":"coolcooldool"},

      {"password":"thisis2","username":"okokok"}

      ]

     };

  var obj2 = eval(value2);

  alert(obj2.list[0].password);

 }

四、评价

1. 这种形式将使得性能显著降低,因为它必须运行编译器。

2. eval函数还减弱了你的应用的安全性,因为它给被求值的文本赋予了太多的权力。就像with语句执行的方式一样,它降低了语言的性能。

3. Function构造器是eval的另一种形式,所以它同样也应该被避免使用。

拓展阅读

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

    本文主要是对JS操作JSON的要领做下总结。

    在JSON中,有两种结构:对象和数组。

    1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:

    var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

    2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

    例如:

    var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

为了方便地处理JSON数据,JSON提供了json.js包,下载地址:点击链接

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

    JSON字符串:

    var str1 = '{ "name": "cxh", "sex": "man" }';

    JSON对象:

var str2 = { "name""cxh""sex""man" };

    一、JSON字符串转换为JSON对象     要运用上面的str1,必须运用下面的要领先转化为JSON对象:

    //由JSON字符串转换为JSON对象

    var obj = eval('(' + str + ')');

或者

   var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

   var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

    然后,就可以这样读取:

    Alert(obj.name);

    Alert(obj.sex);

特别留心:如果obj本来就是一个JSON对象,那么运用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用parseJSON()函数处理后会有疑问(抛出语法异常)。

  二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。     例如:

    var last=obj.toJSONString(); //将JSON对象转化为JSON字符

    或者

    var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

注: 上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的JSON 修改了API,将JSON.stringify() 和JSON.parse() 两个要领都注入到了Javascript 的内建对象里面,前者变成了Object.toJSONString(),而后者变成了String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。

注: json数据的格式要求非常严格,属性名称必须是用双引号“”括起来。一定要注意,自己就吃过这方面的亏。