w3c上说
- JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性,更易理解
* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
Json 的语法
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
现在json在项目中使用的越来越广泛,json较xml的不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔
数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔
值(value)可以是双引号括起来的字符串(string)、数值(number)、true
、false
、 null
、对象(object)或者数组(array)。这些结构可以嵌套。
字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。字符串(string)与C或者Java的字符串非常相似
数值(number)也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节
空白可以加入到任何符号之间。 以下描述了完整的语言。
以上摘自于JSON官网
下面通过ajax来操作json
之前我在vs上建过一个mvc2的应用web应用,为了获取它自带的Jquery脚本,就干脆在项目的根目录下建了一个html页面,不知道为什么每次在vs中点击在浏览器中运行此页面时,页面里的脚本就不执行,干脆就拷贝出js重新建了个站点,之后也就没有深入研究过到底为什么不行。
先说下json,下面是从人人网上拷贝的部分json文件内容
{ "ad_js_version":40881, "ad_css_version":40918, "udpate_interval":"40", "max_update_count":"9", "list" : [ { "next_load_time":15000000, "flush_type":0, "adzone_id":"100000000063", "ads" : [ { "widget_id" : "33", "widget_version" : "1.10", "widget" : "{title:'西方神话怪物排行',clickUrl:'http://gamestat.renren.com/game/1006159',content:'10,人马怪;9,阿尔克墨涅;8,独眼巨人;7,美杜莎;6,狮鹫;第一名竟是…',mediaUri:'/20120727/15/c0ce6184-3b14-40a5-8bbe-8f8f963bd659.jpg'}", "ad_param": { "creative_id": "1000067828000100001", "title":"NULL", "content":"10,人马怪;9,阿尔克墨涅;8,独眼巨人;7,美杜莎;6,狮鹫;第一名竟是…", "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000067828000100001&mc=0%5EC33%5EC1000067828000100001%5EC1000067828000100001%5EC104.528%5EC1%5EC105%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_33%5EC0%5EC1409014614350257260%5EC100000019711%5EC1000067828%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fgamestat.renren.com%2Fgame%2F1006159", "media_uri":"http://jebe.xnimg.cn", "engine":"1", "pvtime":"2012-07-31 21:24:09", "monitor_url":"%2F20120727%2F15%2Fc0ce6184-3b14-40a5-8bbe-8f8f963bd659.jpg" } } , { "widget_id" : "31", "widget_version" : "1.8", "widget" : "{title:'北京周末网络学习',clickUrl:'http://xueliedu.com',mediaUri:'/20120611/14/137ca525-7f46-4fe8-aee6-dc5c15723593.png'}", "ad_param": { "creative_id": "1000062897000700001", "title":"北京周末网络学习", "content":"", "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000062897000700001&mc=0%5EC31%5EC1000062897000700001%5EC1000062897000700001%5EC200%5EC2%5EC200%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_31%5EC0%5EC1409014614350257260%5EC100000025181%5EC1000062897%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fxueliedu.com", "media_uri":"http://jebe.xnimg.cn", "engine":"1", "pvtime":"2012-07-31 21:24:09", "monitor_url":"%2F20120611%2F14%2F137ca525-7f46-4fe8-aee6-dc5c15723593.png" } } , { "widget_id" : "31", "widget_version" : "1.8", "widget" : "{title:'订杂志特价3折起',clickUrl:'http://www.zazhipu.com/ggfrom.asp?src=renren&url=tejia/index.asp',mediaUri:'/20120718/08/f220db7c-65c1-4d56-a335-462d8caa113d.jpg'}", "ad_param": { "creative_id": "1000063780000100001", "title":"NULL", "content":"", "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000063780000100001&mc=0%5EC31%5EC1000063780000100001%5EC1000063780000100002%5EC200%5EC3%5EC200%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_31%5EC0%5EC1409014614350257260%5EC100000026258%5EC1000063780%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fwww.zazhipu.com%2Fggfrom.asp%3Fsrc%3Drenren%26url%3Dtejia%2Findex.asp", "media_uri":"http://jebe.xnimg.cn", "engine":"1", "pvtime":"2012-07-31 21:24:09", "monitor_url":"%2F20120718%2F08%2Ff220db7c-65c1-4d56-a335-462d8caa113d.jpg" } } ] } ] }
这个json看起来还挺复杂的,下面我们来获取所有的click_url所对应的值
上面的例子很简单的就取到了click_url
下面在取widget值中的title和clickUrl
首先widget的值是一个json格式的字符串,下面就用到js自带的函数eval()
JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:
var obj = eval ("(" + jsonString+ ")");
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../JS/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: '../Data/show.json', dataType: 'json', success: function (data) { //因为list数组里就只有一个对象,长度为1,就直接对ads数组进行循环取click_url $.each(data.list[0].ads, function (i, item) { $("#url").append("<a href='" + item.ad_param.click_url + "' >Click" + i + "</a></br>"); $("#url1").append("<a href='" + eval("(" + item.widget + ")").clickUrl + "' >" + eval("(" + item.widget + ")").title + "</a></br>"); }); } }); }); </script> </head> <body> <div id="url"> </div> <div id="url1"> </div> </body> </html>测试结果: