JSON扫盲帖
[心得]JSON扫盲帖+JSON类教程
昨天发了json的AS3解析类,从大家的跟帖上来看,好多人还是不知道这个东西的,特建一个扫盲贴。 其实在AS中使用json其实并不是一个必须或是很好的选择,因为AS对xml的解析已经很不错了,但是为什么可以考虑使用json呢,有以下几点:
JSON是什么? 简单 JSON 示例 按照最简单的形式,可以用下面这样的 JSON 表示名称/值对:
值的数组 当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在XML中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。 如果使用 JSON,就只需将多个带花括号的记录分组在一起:
在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物。 ps:以上例子都是来自http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/,掌握 Ajax,自己懒,看人家有就顺便用了 当当当,我又回来了,上周忙这上班没顾上写用法,下面就介绍一下adobe的json类的用法。 上次发表的json类有问题(http://bbs.actionscript3.cn/thread-1625-1-1.html),因为我也是从别人处下载的,谁知道是一个半成品。望大家别生气啊,建议管理员给删除了! 这次是adobe的官方的类,我修改了一下包,这次就可以用了。 下面是教程,比较简单: 1、服务器端来的json 怎么样获得服务器端的json我就不说了吧(就是通讯),那么得到的应该是一个字符串,存入变量serverJSON,使用方式如下:
json就是一个对象了,简单吧。 举一个例子: 上面的JSON的一段代码:
代码:
不是吧这么简单。其实转变后就成为一个对象了,可以通过点语法来访问这些值了。XML靠边去。 2、本地对象做成JSON 你要是能自己拼出JSON字符串也可以,不过我们是在面向对象的世界啊,那么我们都是对象啊,到时候对象直接就可以来用了。 举一个例子:
这样就可以给服务器了。 总结:就两个方法,JSON.decode(String),JSON.encode(Object),有这么简单的方式实现传输量小,而且简单的数据格式,我们为什么还不用呢? 其实XML自然也有他自己的强势,当一个结构复杂的数据结构出现的时候,这个时候JSON就很难搞定了,XML就是首选了。 |
要用到JSON,看了一篇(http://bbs.actionscript3.cn/thread-1657-1-1.html)的扫盲贴,在Flex中使用Json十分方便。json是介于纯文本方式与xml方式之间的一种格式,json能做到的事情,xml完成可以做到。为什么要用json呢,我看大部分还是像我一样,不得不用。json是ajax数据传输的首选,现有的项目使用的已经是json,如果增加flex界面时也使用json,那改动就会非常少。扫盲贴中说出的三个理由,我觉得这一个最充分。
要在flex中使用json,首先要下一个json包。是官方的,却在官方怎么也载不下来。终于在CSDN上用了3分才down下来。放在附件中,需要的可以拿去用。
贴一个例子:
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
importcom.adobe.serialization.json.*;
privatevarjsonStr:String;
privatevarjsonObj:Object;
privatevarjsonObj2:Object;
privatevarjsonStr2:String;
internalfunctioninit():void{
jsonStr='{"name":"zhanzhihu","age":22,"gender":"male"}';
jsonObj=newObject();
jsonObj=JSON.decode(jsonStr);
trace(jsonObj.name);
jsonObj2=newObject();
jsonObj2.firstName="bill";
jsonObj2.lastName="Gate";
jsonObj2.com="Microsoft";
jsonStr2=JSON.encode(jsonObj2);
trace(jsonStr2);
}
]]>
</mx:Script>
</mx:Application>
输出为:
zhanzhihu
{"firstName":"bill","lastName":"Gate","com":"Microsoft"}
jsonStr是一个json格式的字符串,用JSON.decode(String)便可以将它解析为as对象,同样用JSON.encode(Object)可以将as对象转为json字符串,flex前台对json的操作真是方便。
corelib下载地址:http://code.google.com/p/as3corelib/
[转]Flex用JSON处理返回的数据
关键字: flex json- <?xmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns="*"layout="absolute"
- creationComplete="service.send()">
- <mx:Script>
- <![CDATA[
- importmx.collections.ArrayCollection;
- importmx.rpc.events.ResultEvent;
- importcom.adobe.serialization.json.JSON;
- privatefunctiononJSONLoad(event:ResultEvent):void
- {
- //gettherawJSONdataandcasttoString
- varrawData:String=String(event.result);
- //decodethedatatoActionScriptusingtheJSONAPI
- //inthiscase,theJSONdataisaserializeArrayofObjects.
- vararr:Array=(JSON.decode(rawData)asArray);
- //createanewArrayCollectionpassingthede-serializedArray
- //ArrayCollectionsworkbetterasDataProviders,astheycan
- //bewatchedforchanges.
- vardp:ArrayCollection=newArrayCollection(arr);
- //passtheArrayCollectiontotheDataGridasitsdataProvider.
- grid.dataProvider=dp;
- }
- ]]>
- </mx:Script>
- <mx:HTTPServiceid="service"resultFormat="text"
- url="http://weblogs.macromedia.com/mesh/mashedpotato.json"
- result="onJSONLoad(event)"/>
- <mx:DataGridid="grid"right="10"left="10"top="10"bottom="10">
- <mx:columns>
- <mx:DataGridColumnheaderText="Service"dataField="src"/>
- <mx:DataGridColumnheaderText="Title"dataField="title"/>
- </mx:columns>
- </mx:DataGrid>
- </mx:Application>
我们来先看看那后台java bean的处理:他要接受flex app的读取数据和更新数据的请求,而且他们之间的数据传递格式采用的是json.所以我们的java bean的一个框架结构应该是: 里面包含了两个重要的方法(getJsonArray()和sendJsonArray())分别对应flex app的读取数据和更新数据的请求。在getJsonArray()方法中,要连接数据库,取得员工的信息资料,然后按照json格式封装数据,结果返回给flex app,由flex app中的datagrid显示出来。我们具体看看getJsonArray()这个方法: 内容其实都很简单,只是读取数据和封装成json格式的数据,最后把json array格式的jsonEmployeeArray转换成string格式传输给flex app.即return语句。而当flex app要使用这个json array格式的数据,自然需要按照json格式解码等,后面在介绍。接着看看那个更新数据的方法sendJsonArray(): 即把flex app传递过来的String类型的json格式的的数据解码开来,然后根据对应的Id把更新后的名字保存在数据库中。这里我们传递过来的是整个datagrid的信息,不管是有没有更新的,都要循环的更新所有员工的信息。所以呢,在你的程序中你的JsonGrid.java文件应该类似: 界面设计好了之后,我们开始做读取数据的处理。我们采用的是remoteObject的方法所以,在mxml中添加<mx:RemoteObject>,destination指定的为后台java bean中的json.JsonGrid中的getJsonArray()这个方法。 由于getJsonArray方法返回的是一个array类型的数据,所以我们要在mxml中的AS定义一个dataArray,同时这个dataArray也作为datagrid的一个data provier.我们的设计是在程序加载的时候自动读取数据,所以要在在<mx:DataGrid>中使用了creationComplete="{initDataGrid()}"来初始化这个dataArray,以及执行读取数据的功能和对结果进行处理: 按钮<mx:Button id="getJson" label="读取" toolTip="读取员工数据" x="61" y="268" width="74" height="29" click="getDataAction()"/>执行的是同样的功能。其实这时候已经完成了读取数据的工作了。要成功的运行的话,我们还需要在flex/remoting-config.xml指定channel作为flex app与java bean的沟通渠道。即添加: <destination id="getJsonData"> 接下来将更新数据的功能。 首先我们要把datagrid中的data provider中的数据,这里是我们前面说的dataArray,转换成json格式,然后作为参数由remoteObject的方式传给java bean,由java bean完成跟新数据的操作。为了确保用户在更新datagrid之后能够与dataArray的数据信息保持同步,我们还需要做绑定的工作: 在更新之前,我们也有确保用户输入无误:我们只做简单的检查:用户名不能为空而且长度小于10: 这样之后,我们开始做更新的操作,还是要先定义一个remoteObject,指定destiontion: 然后开始做用户安下更新按钮<mx:Button id="sendJson" x="254" y="268" label="更新" height="29" click="sendDataAction()"width="74"/>之后所做的程序操作,发送数据和返回结果: 发送数据是以json编码再换成string格式传到后台,再有后台解码找到对应的id和name做更新操作。操作的结果会显示在lblStatus这个Label上。同样若要正确的执行程序还需要指定channel,即为flex app中的sendDataAction调用后台的sendJsonArray()方法提供沟通渠道:记载remoting-config.xml添加: <destination id="sendJsonData"> 所以你前台的flex app代码应该类似如下:
使用Flex,Java,Json更新Mysql数据【1】
CREATEDATABASEIFNOTEXISTS test;
USE test;
DROPTABLEIF EXISTS`employee`;
CREATETABLE`employee`(
`id`varchar(10)NOTNULL,
`name`varchar(45)NOTNULL,
`gender`varchar(10)NOTNULL,
`department`varchar(45)NOTNULL,
PRIMARY KEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=latin1;
publicclassJsonGrid{
privateConnectioncon=null;
privateStringmyDriver="com.mysql.jdbc.Driver";
privateStringconURL="jdbc:mysql://localhost:3306/test";
privateStringuserName="root";
privateStringuserPass="12345";
publicConnectionconToDB(){
try{
Class.forName(myDriver);
con=DriverManager.getConnection(conURL,userName,userPass);
}catch(Exceptione){
e.printStackTrace();
}
returncon;
}
publicStringgetJsonArray(){
Stringresult=newString();
returnresult;
}
publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
returnresult;
}
}
publicStringgetJsonArray(){
JSONArray jsonEmployeeArray=newJSONArray();
ResultSetrs=null;
Stringresult=newString();
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
rs=stmt.executeQuery("select * from employee");
while(rs.next()){
JSONObject jsonEmployee=newJSONObject();
jsonEmployee.put("id",rs.getString("id"));
jsonEmployee.put("name",rs.getString("name"));
jsonEmployee.put("gender",rs.getString("gender"));
jsonEmployee.put("department",rs.getString("department"));
jsonEmployeeArray.add(jsonEmployee);
}
result=jsonEmployeeArray.toString();
conToDb.close();
//result = new JSONObject().put("jsonEmployeeArray",jsonEmployeeArray).toString();
}catch(SQLExceptionex){
ex.printStackTrace();
}
returnresult;
}
publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
//jsonData = jsonData.replace("//", "");
JSONArray jsonArray=JSONArray.fromObject(jsonData);
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
for(inti=0;i<jsonArray.size();i++){
JSONObject jsonObject=JSONObject.fromObject(jsonArray.getString(i));
Stringid=jsonObject.getString("id");
Stringname=jsonObject.getString("name");
stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
}
result="恭喜,成功更新数据!";
conToDb.close();
}catch(Exceptione){
e.printStackTrace();
}
returnresult;
}
接下来我们看看flex app前台的处理。
packagejsongrid;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
importnet.sf.json.JSONArray;
importnet.sf.json.JSONObject;
publicclassJsonGrid{
privateConnectioncon=null;
privateStringmyDriver="com.mysql.jdbc.Driver";
privateStringconURL="jdbc:mysql://localhost:3306/test";
privateStringuserName="root";
privateStringuserPass="liceven";
publicConnectionconToDB(){
try{
Class.forName(myDriver);
con=DriverManager.getConnection(conURL,userName,userPass);
}catch(Exceptione){
e.printStackTrace();
}
returncon;
}
publicStringgetJsonArray(){
JSONArray jsonEmployeeArray=newJSONArray();
ResultSetrs=null;
Stringresult=newString();
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
rs=stmt.executeQuery("select * from employee");
while(rs.next()){
JSONObject jsonEmployee=newJSONObject();
jsonEmployee.put("id",rs.getString("id"));
jsonEmployee.put("name",rs.getString("name"));
jsonEmployee.put("gender",rs.getString("gender"));
jsonEmployee.put("department",rs.getString("department"));
jsonEmployeeArray.add(jsonEmployee);
}
result=jsonEmployeeArray.toString();
conToDb.close();
//result = new JSONObject().put("jsonEmployeeArray",jsonEmployeeArray).toString();
}catch(SQLExceptionex){
ex.printStackTrace();
}
returnresult;
}
publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
//jsonData = jsonData.replace("//", "");
JSONArray jsonArray=JSONArray.fromObject(jsonData);
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
for(inti=0;i<jsonArray.size();i++){
JSONObject jsonObject=JSONObject.fromObject(jsonArray.getString(i));
Stringid=jsonObject.getString("id");
Stringname=jsonObject.getString("name");
stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
}
result="恭喜,成功更新数据!";
conToDb.close();
}catch(Exceptione){
e.printStackTrace();
}
returnresult;
}
}
使用Flex,Java,Json更新Mysql数据【2】
<mx:Panel title="员工信息管理"x="61"y="41"width="476"height="385"layout="absolute">
<mx:DataGrid id="dgData"toolTip="姓名可编辑"x="10"y="10"width="436"height="250"dataProvider="{dataArray}"
creationComplete="{initDataGrid()}"editable="true"itemEditEnd="{checkName(event)}"verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn headerText="编号"dataField="id"editable="false"/>
<mx:DataGridColumn headerText="姓名*"dataField="name"editable="true"/>
<mx:DataGridColumn headerText="性别"dataField="gender"editable="false"/>
<mx:DataGridColumn headerText="部门"dataField="department"editable="false"/>
</mx:columns>
</mx:DataGrid>
<mx:Label id="lblStatus"x="27"y="305"width="372"height="25"fontFamily="Times New Roman"fontSize="13"color="#BF03FD"/>
<mx:Button id="getJson"label="读取"toolTip="读取员工数据"x="61"y="268"width="74"height="29"click="getDataAction()"/>
<mx:Button id="sendJson"x="254"y="268"label="更新"height="29"click="sendDataAction()"width="74"/>
</mx:Panel>
<mx:RemoteObject id="getData"destination="getJsonData"source="jsongrid.JsonGrid"showBusyCursor="true"result="getJsonData(event)">
<mx:method name="getJsonArray"result="getJsonData(event)"/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.controls.TextInput;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;
[Bindable]
private var dataArray:ArrayCollection;
private function initDataGrid():void{
dataArray=new ArrayCollection();
getData.getOperation('getJsonArray').send();
}
private function getDataAction():void{
getData.getJsonArray();
lblStatus.text="正在读取...请稍候";
}
private function getJsonData(event:ResultEvent):void{
var rawArray:Array;
var arraySize:int;
var rawData:String=event.result as String;
rawArray=JSON.decode(rawData)as Array;
dataArray=new ArrayCollection(rawArray);
arraySize=dataArray.length;
lblStatus.text="读取成功,总共"+arraySize+"条员工信息";
}
]]>
</mx:Script>
<properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
<mx:Binding source="dgData.dataProvider as ArrayCollection"destination="dataArray"/>
private function checkName(event:DataGridEvent):void{
var texIn:TextInput=TextInput(event.currentTarget.itemEditorInstance);
var nameValue:String=texIn.text;
if(nameValue==""||nameValue.length>10){
event.preventDefault();
lblStatus.text="姓名不能为空而且长度小于10";
}
}
<mx:RemoteObject id="sendData"destination="sendJsonData"showBusyCursor="true"result="updatedJsonDataResult(event)"/>
private function sendDataAction():void{
//var objSend:Object=new Object();
var dataString:String=JSON.encode(dataArray.toArray());
//dataString=escape(dataString);
sendData.sendJsonArray(dataString);
lblStatus.text="请稍后...正在处理";
}
private function updatedJsonDataResult(event:ResultEvent):void{
lblStatus.text=String(event.result as String);
}
<properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
<?xmlversion="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Style>
Panel{
fontSize:16;
fontFamily: Times New Roman;
}
Button{
fontSize:16;
color: blue;
fontFamily: Times New Roman;
}
DataGrid{
fontSize:16;
color:green;
fontFamily: Times New Roman;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.controls.TextInput;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;
[Bindable]
private var dataArray:ArrayCollection;
private function initDataGrid():void{
dataArray=new ArrayCollection();
getData.getOperation('getJsonArray').send();
}
private function getDataAction():void{
getData.getJsonArray();
lblStatus.text="正在读取...请稍候";
}
private function getJsonData(event:ResultEvent):void{
var rawArray:Array;
var arraySize:int;
var rawData:String=event.result as String;
rawArray=JSON.decode(rawData)as Array;
dataArray=new ArrayCollection(rawArray);
arraySize=dataArray.length;
lblStatus.text="读取成功,总共"+arraySize+"条员工信息";
}
private function checkName(event:DataGridEvent):void{
var texIn:TextInput=TextInput(event.currentTarget.itemEditorInstance);
var nameValue:String=texIn.text;
if(nameValue==""||nameValue.length>10){
event.preventDefault();
lblStatus.text="姓名不能为空而且长度小于10";
}
}
private function sendDataAction():void{
//var objSend:Object=new Object();
var dataString:String=JSON.encode(dataArray.toArray());
//dataString=escape(dataString);
sendData.sendJsonArray(dataString);
lblStatus.text="请稍后...正在处理";
}
private function updatedJsonDataResult(event:ResultEvent):void{
lblStatus.text=String(event.result as String);
}
]]>
</mx:Script>
<mx:RemoteObject id="sendData"destination="sendJsonData"showBusyCursor="true"result="updatedJsonDataResult(event)"/>
<mx:RemoteObject id="getData"destination="getJsonData"source="jsongrid.JsonGrid"showBusyCursor="true"result="getJsonData(event)">
<mx:method name="getJsonArray"result="getJsonData(event)"/>
</mx:RemoteObject>
<mx:Binding source="dgData.dataProvider as ArrayCollection"destination="dataArray"/>
<mx:Panel title="员工信息管理"x="61"y="41"width="476"height="385"layout="absolute">
<mx:DataGrid id="dgData"toolTip="姓名可编辑"x="10"y="10"width="436"height="250"dataProvider="{dataArray}"
creationComplete="{initDataGrid()}"editable="true"itemEditEnd="{checkName(event)}"verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn headerText="编号"dataField="id"editable="false"/>
<mx:DataGridColumn headerText="姓名*"dataField="name"editable="true"/>
<mx:DataGridColumn headerText="性别"dataField="gender"editable="false"/>
<mx:DataGridColumn headerText="部门"dataField="department"editable="false"/>
</mx:columns>
</mx:DataGrid>
<mx:Label id="lblStatus"x="27"y="305"width="372"height="25"fontFamily="Times New Roman"fontSize="13"color="#BF03FD"/>
<mx:Button id="getJson"label="读取"toolTip="读取员工数据"x="61"y="268"width="74"height="29"click="getDataAction()"/>
<mx:Button id="sendJson"x="254"y="268"label="更新"height="29"click="sendDataAction()"width="74"/>
</mx:Panel>
</mx:Application>
相关推荐
如果json字符串是从html用FlashVars来传递参数时那么字符串中的第一个双引号(包括双引号)以后的内容就不会得到传送.
json转换json schema
最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json库 nlohmann json源代码最好用的c++json...
json定义json定义json定义json定义json定义json定义json定义json定义json定义json定义
MFC使用JSON11将json,包括json字符串转对象,对象转json字符串
json实例json实例json实例json实例json实例json实例json实例json实例
json paser 属于idea插件 用于解析json json paser 属于idea插件 用于解析json json paser 属于idea插件 用于解析json json paser 属于idea插件 用于解析json json paser 属于idea插件 用于解析json json paser 属于...
json与labview常见相互转化,能解决大多json问题
JSON JSON .zip JSON JSON .zip JSON JSON .zip JSON JSON .zip
json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象json转对象...
JSON文档 JSON手册
//Program.cs 里是一些比较极端的测试,实际使用时只需复制 JSON.cs 到项目里。 //比如类Vec2: public class Vec2 { public float x; public float y; } //编码范例: Vec2 v1 = new Vec2(); v1.x = 1.23f; v1....
java json api,json api
pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb通过http协议传json; pb...
jsonEditor Editor json jsonEditor Editor json jsonEditor Editor json jsonEditor Editor json
美国地图json文件usa.json美国地图json文件usa.json美国地图json文件usa.json
json3.js 【JS / JavaScript 中解析JSON的js包,JSON官方的JSON解析包】。JavaScript中解析JSON的js包,页面中引入json3.js,即可使用。 使用方法:JSON.parse(str), JSON.stringify(obj) 更多详情请参考博文: ...
电视源json
json.jar json.jar json.jar json.jar json.jar json.jar json.jar json.jar