js与json.doc_第1页
js与json.doc_第2页
js与json.doc_第3页
js与json.doc_第4页
js与json.doc_第5页
已阅读5页,还剩24页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据-JS对象-jQuery提交-python处理,另外一种就是倒过来。python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON。 一、JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递给python。 处理:引用一个json2.js文件,调用JSON.stringify()方法。例如:var data = new Object(); var json_data = JSON.stringify(data); 读取:python这里就很简单了,用dict_data = json.loads(json_data)就OK了 二、JSON转换成为JS 流程:python组装一个dict数据并转成JSON格式传递给前端,或者前端通过jQuery的$.getJSON()方法直接读取这个JSON格式的数据 处理:用jQuery的一个方法$.parseJSON()将JSON格式的数据转成JS对象。例如:var json_data = $.getJSON(); var data = $.parseJSON(json_data); 读取:JS对像的操作就不必多说了 这里,python要把字典转换成JSON格式数据,用json.dumps()这个方法就行了 PS:json2.js这个文件在网上搜一下就能下载到。 利用json获取字符出现次数的代码代码如下: 复制代码 代码如下:function ObjRegExp() var newStr= Drive someone up a wall; newStr = newStr.replace(new RegExp(/s/ig),); var objJson = ; for(var i = 0 ;i newStr.length ; i+) var objChar = newStr.charAt(i); if(objJsonobjChar) objJsonobjChar = parseInt(objJsonobjChar) + 1; else objJsonobjChar = 1; var oDiv = document.getElementById(objDiv); oDiv.appendChild(document.createTextNode(Drive someone up a wall!); oDiv.appendChild(document.createElement(); for(var key in objJson) oDiv.appendChild(document.createTextNode(key +:+ objJsonkey); oDiv.appendChild(document.createElement(); Html 如下: 复制代码 代码如下: json的前台操作和后台操作实现代码-通常情况下,json的在项目中的应用都是在后台把数据传到前台,然后前台再获取json中的数据.例子如下: 复制代码 代码如下: 通过 JSON 字符串来创建对象 First Name: Last Name: var txt = employees: + firstName:Bill,lastName:Gates , + firstName:George,lastName:Bush , + firstName:Thomas,lastName:Carter ; var obj = eval ( + txt + ); document.getElementById(fname).innerHTML=obj.employees1.firstName document.getElementById(lname).innerHTML=obj.employees1.lastName 然后这次的应用是在前台页面中存储数据到json中,然后传送到后台. 附应用图一张: 由图可知ModifyCellStyle负责的font的style部分,但是不能控制居中居左居右和上对齐,居中对齐等对齐方式.ModifyString是修改cell中的内容. 使用格式如下: 复制代码 代码如下:var arrObj = ; /动作 Var act = action:ModifyCellStyle,bold:true,italic:false,cellIndex:rowx+:+rowy; arrObj.push(act); ); var sObj = JSON.stringify(arrObj); 将json转化成数组。 以ModifyCellStyle方法为例:其中的bold(加粗),itelic(斜体),underline(下划线)的值为布尔值。即取真或假即可。其他的sizeString,textColorString,cellColorString等的取值为string,cellIndex的取值为“x,y”即横坐标和纵坐标。 这个API主要用在excel中,用于对单元格的操作。记录其历史操作。点击保存的时候,然后json转换的String传向后台,后台接收数据,从后台操作excel。 当然这个要加载json2.js文件。可以自己下载Json 数据格式1,基础 这篇文章讲的比较深入,所以不用我画蛇添足了,只是下面这段代码很好的演示了JSON如何处理字符串数据,保存下来备查: zt from:/developerworks/cn/web/wa-lo-json/ 将 String 对象编码为 JSON 格式时,只需处理好特殊字符即可。另外,必须用 () 而非 () 表示字符串: 复制代码 代码如下:static String string2Json(String s) StringBuilder sb = new StringBuilder(s.length()+20); sb.append(); for (int i=0; is.length(); i+) char c = s.charAt(i); switch (c) case : sb.append(); break; case : sb.append(); break; case /: sb.append(/); break; case b: sb.append(b); break; case f: sb.append(f); break; case n: sb.append(n); break; case r: sb.append(r); break; case t: sb.append(t); break; default: sb.append(c); sb.append(); return sb.toString(); 2,在PHP中的应用。 PHP中使用json_encode和json_decode来进行JSON封装和拆装。 封装string类型数据:json_encode在输出结果中,会在源字符串两端加上(),如对象内容是(abc),结果是(abc”) 封装stdClass对象类型数据:比如有个value”成员内容是字符串,结果是:value:u5e7fu4e1cu4f53u80b2,CCTV5 3,为什么要写这个。 ZenTaoPHP框架中,请求类型如果是“json”,输出结果会以JSON格式封装,但在对输出信息进行分析时,发现并非标准的JSON格式。 深究后,发现ZenTaoPHP对一部分数据进行了二次JSON封装,输出类似:value:u5e7fu4e1cu4f53 这样的结果。JSON 和 JavaScript eval使用说明发布:dxy 字体:增加 减小 类型:转载 JSON (JavaScript Object Notation) 一种轻量级的数据交换格式,比 XML 更轻巧,JSON 是JavaScript 原生格式,这意味着 JavaScript 中处理 JSON 数据不需要任何 API 和工具包。JSON 格式可以使对象(object)、数组(array)、值(value)、字符串(string)、数值(number)。 复制代码 代码如下: var user = Name:Andy, Sex :man, Age :20, Phone:mobilephone:123456789,telephone:1234-12345678, baby:big:xiaohong,middle:xiaoming,small:xiaoli /包含数组 alert(user.Name); alert(user.Phone.mobilephone); alert(user.baby0.big); user.baby0.big = -;/修改了 JSON 值 alert(user.baby0.big); 参考:/json-zh.html 下面来看看 JavaScript 的 eval 函数。 eval 函数会评估给定的一个JavaScript代码的字符串,并试图去执行包含在字符串里的表达式或者一系列的合法的 JavaScript 语句。eval 函数将把最后一个表达式或者语句包含的值或引用作为返回值。 代码 复制代码 代码如下: var bar = bar; var foobar = eval(foo+bar); alert(bar + foobar);/执行语句 foobar = eval(if(bar = bar)bar = foo-bar;elsebar = bar-foo;); alert(foobar);/返回语句中包含的值 JSON 和 对象字面量(Object Literals)的区别:JSON 的名字部分严格用引号+名字来表示。 代码 复制代码 代码如下: /对象字面量 var objectLiteral = name:Objector.L, age:24, special:JavaScript, sayName:function() return ; ; /JSON 对象 var jsonFormat = summary:Blogs, blogrolls: title:Explore JavaScript, link: , title:Explore JavaScript, link: ; 由于 Ajax 的兴起, JSON 这种轻量级的数据格式作为客户端与服务器端之间传输的格式逐渐流行起来,进而出现的问题是如何将服务器端构建好的 JSON 数据转换为可用的 JavaScript 对象,利用 eval 函数无疑是一种简单而直接的方法。在转化的时候需要将 JSON 字符串的外面包装一层园括号: var jsonObject = eval(+ jsonFormat +) 加园括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量,如若不佳加外层的括号,那么eval会将大括号之别为JavaScript代码块的开始结束标记机,那么将被认为是执行了一句空语句。所以下面两个执行结果是不同的: 复制代码 代码如下:alert(eval(); /return undefined alert(eval(); /return object Object JSON 格式的名字部分为什么要加引号?因为eval函数会将foo:bar解释成合法的JavaScript 语句,而非表达式。但人们往往是想让eval将这段代码解释成一个对象。所以JSON 格式会强制你去在名字的外侧加上引号,再结合圆括号,eval就不会错误的将JSON解释成代码块。 复制代码 代码如下:/eval 错误解析语义 alert(eval(foo:bar); /return bar,incorrect /eval 正确解析JSON alert(eval(foo:bar);/return JSON object,correct js+json用表格实现简单网站左侧导航调用很简单,只要将数据组织成json格式即可:格式如下: 复制代码 代码如下:window.onload = function() var tf=if1; var data=m:体育网站,s:sn:百度体育,st:/n?cmd=1&class=sportnews, sn:搜狐体育,st:/, sn:新浪体育,st:/, m:新闻网站,s:sn:百度,st:/, sn:搜狐,st:/, sn:新浪,st:/, m:视频网站,s:sn:百度视频,st:/, sn:搜狐视频,st:/, sn:新浪视频,st:/ ; var nav=new tableNav(table1,data,tf); var bautoClose=false; /打开当前导航条时其它导航条是否关闭 nav.generateNav(bautoClose); 整个实例代码如下:供初学者学习! Ctrl+A 全选 注:如需引入外部Js需刷新才能执行jQuery 遍历json数组的实现代码复制代码 代码如下: var d1 =text:王家湾,value:9,text:李家湾,value:10,text:邵家湾,value:13; $(d1).each(function() alert(this.text+ +this.value); ); 不用JQuery 复制代码 代码如下: var json = options:text:王家湾,value:9,text:李家湾,value:10,text:邵家湾,value:13 json = eval(json.options) for(var i=0; ijson.length; i+) alert(jsoni.text+ + jsoni.value) js遍历json数组 Ctrl+A 全选 注:如需引入外部Js需刷新才能执行Ajax+Json 级联菜单实现代码第一个下拉框: 复制代码 代码如下: /第一个下拉框里的值 第二个下拉框: 复制代码 代码如下: /要3及菜单还可以在次写相应的时间 -请选择二级菜单- js代码: 复制代码 代码如下: $.ajaxSetup( cache:false ); /清除ajax中之前的值 function doChange(obj) var url = +?rawfood.category=+obj;/第一个下拉框选中后进入的action,action中给第二个下拉框所需的值赋值 $.getJSON(url,function(json) var seleOjb=document.getElementById(subSelect); for(var k=0;kseleOjb.options.length;k+) seleOjb.options.remove(k); /当再选中第一个下拉框中的值时,把第二个下拉框中原来的值清除 $.each(json.subCategoryDictList,function(index,subDictData) var optionj=document.createElement(option); /为第二个下拉框赋值 optionj.value = subDictData.id; /alert(subDictData.id); optionj.text=subDictD; seleOjb.add(optionj); ); ); 复制代码 代码如下: /定义返回的参数 subCategoryDictListd+.id, subCategoryDictListd+.name json 入门基础教程在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地在应用程序中移动数据和对象。如果您阅读了本系列前面的文章,那么应已对数据格式有了相当的认识。前面的文章解释了在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对。可以将数据组合成下面这样的形式:firstName=Brett&lastName=McLaughlin&email=brettnewI这样就行了,不需要再做什么了。实际上,Web 老手会意识到通过 GET 请求发送的信息就是采用这种格式。然后,本系列讨论了 XML。显然,XML 得到了相当多的关注(正面和负面的评价都有),已经在 Ajax 应用程序中广泛使用。关于如何使用 XML 数据格式,可以回顾 本系列前面的文章: Brett McLaughlin brettnewI这里的数据与前面看到的相同,但是这一次采用 XML 格式。这没什么了不起的;这只是另一种数据格式,使我们能够使用 XML 而不是纯文本和名称/值对。本文讨论另一种数据格式,JavaScript Object Notation(JSON)。JSON 看起来既熟悉又陌生。它提供了另一种选择,选择范围更大总是好事情。添加 JSON在使用名称/值对或 XML 时,实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript 在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web 表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。但是,有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript 语言中的对象来表示数据,而不仅是将来自 Web 表单的数据放进请求中。在这些情况下,从 JavaScript 对象中提取数据,然后再将数据放进名称/值对或 XML,就有点儿多此一举 了。这时就合适使用 JSON:JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据(同步或异步都可以)。JSON 并不是某种魔弹;但是,它对于某些非常特殊的情况是很好的选择。JSON 基础简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。简单 JSON 示例按照最简单的形式,可以用下面这样的 JSON 表示名称/值对: firstName: Brett 这个示例非常基本,而且实际上比等效的纯文本名称/值对占用更多的空间:firstName=Brett但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如: firstName: Brett, lastName:McLaughlin, email: brettnewI 从语法方面来看,这与名称/值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了某种联系。值的数组当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在 XML 中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。如果使用 JSON,就只需将多个带花括号的记录分组在一起: people: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 这不难理解。在这个示例中,只有一个名为 people 的变量,值是包含三个条目的数组,每个条目是一个人的记录,其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然,可以使用相同的语法表示多个值(每个值包含多个记录): programmers: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ,authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Peretti, genre: christian fiction ,musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 这里最值得注意的是,能够表示多个值,每个值进而包含多个值。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称/值对可以不一样。JSON 是完全动态的,允许在 JSON 结构的中间改变表示数据的方式。在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物。在 JavaScript 中使用 JSON掌握了 JSON 格式之后,在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。将 JSON 数据赋值给变量例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:var people = programmers: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: , authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Peretti, genre: christian fiction , musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。访问数据尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript 变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:grammers0.lastName;注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录(0);最后,访问 lastName 键的值。结果是字符串值 “McLaughlin”。下面是使用同一变量的几个示例。people.authors1.genre / Value is fantasy people.musicians3.lastName / Undefined. This refers to the fourth entry, and there isnt one grammers.2.firstName / Value is Elliotte利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。修改 JSON 数据正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:people.musicians1.lastName = Rachmaninov;在将字符串转换为 JavaScript 对象之后,就可以像这样修改变量中的数据。转换回字符串当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:String newJSONtext = people.toJSONString();这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:String myObjectInJSON = myObject.toJSONString();这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。结束语本系列已经用大量时间讨论了数据格式,这主要是因为几乎所有异步应用程序最终都要处理数据。如果掌握了发送和接收所有类型的数据的各种工具和技术,并按照最适合每种数据类型的方式使用它们,那么就能够更精通 Ajax。在掌握 XML 和纯文本的基础上,再掌握 JSON,这样就能够在 JavaScript 中处理更复杂的数据结构。本系列中的下一篇文章将讨论发送数据以外的问题,深入介绍服务器端程序如何接收和处理 JSON 格式的数据。还要讨论服务器端程序如何跨脚本和服务器端组件以 JSON 格式发送回数据,这样就可以将 XML、纯文本和 JSON 请求和响应混合在一起。这可以提供很大的灵活性,可以按照几乎任何组合结合使用所有这些工具。xml的写法:MJ P而JSON:name:Michael,email:17,homepage:,name:John,email:,homepage:,name:Peggy,email:,homepage:JSON的格式:1,对象:name:Peggy,email:,homepage: 属性 : 值 , 属性 : 值 , 属性 : 值 2,数组是有顺序的值的集合。一个数组开始于,结束于,值之间用,分隔。name:Peggy,email:,homepage:, name:Peggy,email:,homepage:,name:Peggy,email:,homepage:3, 值可以是字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。json 实例详细说明教程官方网站地址:/json-zh.htmljson2.js 脚本之家下载地址 复制代码 代码如下: /直接声明json数据结构 var myJSONObject = bindings: ircEvent: PRIVMSG, method: newURI, regex: http:/.*, ircEvent: PRIVMSG, method: deleteURI, regex: delete.*, ircEvent: PRIVMSG, method: randomURI, regex: random.* ; /声明字符串,可对比一下json文本与我们正常文本的区别 var normalstring=persons:name:jordan,sex:m,age:40, name:bryant,sex:m,age:28, name:McGrady,sex:m,age:27 ; var jsontext=persons:name:jordan,sex:m,age:40, name:bryant,sex:m,age:28, name:McGrady,sex:m,age:27 ; /调用eval函数转换为json对象, var myE = eval(normalstring); document.writeln(myE+); /将json对象转换为字符串 var text = JSON.stringify(myE); /对比转换后的json文本与声明的文本区别 document.writeln(转换后的json文本:+text+声明的json格式文本 +jsontext+声明的普通格式文本 +normalstring+); /当安全比较重要的时候使用JSON解析就好一些。JSON解析只会识别JSON文本并且它更安全,下面调用json的parse函数对文本数据转换生成json数据结构 var myData = JSON.parse(jsontext); document.writeln(myData+); /下面是对json对象的增删查改操作 /声明json对象 var jsonObj2=persons:name:jordan,sex:m,age:40, name:bryant,sex:m,age:28, name:McGrady,sex:m,age:27 ; var persons=jsonObj2.persons; var str=; var person=name:yaoMing,sex:m,age:26; /以下为json对象的操作,去掉注释可以查看操作结果 /jsonObj2.persons.push(person);/数组最后加一条记录 /jsonObj2.persons.pop();/删除最后一项 /jsonObj2.persons.shift();/删除第一项 jsonObj2.persons.unshift(person);/数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作! /删除 /jsonObj2.persons.splice(0,2);/开始位置,删除个数 /替换不删除 var self=name:tom,sex:m,age:24; var brother=name:Mike,sex:m,age:29; jsonObj2.

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论