(EXT之家)EXT 与json的交互
2009-01-06 17:33
225 查看
有一段JavaScript如下:
本文将会讨论如何把一个对象转换为JSON并将其发送到服务器。
首
先我们看看Ext.urlEncode 这个方法(相对应的是Ext.urlDecode解码方法)。
Ext.urlEncode()不能用来处理JSON,Ext.urlEncode()只是负责在HTTP进行GET、POST请求时,将某个“普通的”
对象转换成名称/值(name/value)的状态。我这里说“普通”的意思是urlEncode只是将第一层属性编码,———数组自然没有问题但内嵌的
对象就不行了。 举例:
注意属性3被忽略了
注意特殊字符都被编码了(使用JS自身的encodeURIComponent())
如果你只是想纯粹地发送一些的请求,可把参数写成JavaScript原生对象的形式,然后用这个方法编码urlEncode发送,———这是较方便的做法。
例如,你可以在一个GET请求的URL后面加上一段文本字符:
请求是这样的:
服务器会透过URIComponent解码成为:
你也可以同POST请求发送这样的内容:
请求是这样的:
POST内容:
服务器得到的结果是和GET请求的内容无异的。
这一切还顺利,但说到要发送和接受JSON,该怎么办呢?接下来再看!
Ext.encode() (其对应的解码方法为Ext.decode)转换一个复制的对象为一段JSON字符举例:
注意内嵌对象的属性现在被包含进去了
刚才是我们转换一个简单的对象到名称/值(name/value)的状态,现在的情况将有所不同,此时的对象已经被转换到(序列化)一段参数。具体的作用是,以名称/值(name/value)的形式,发送到服务器解析。如果只是发送一个JSON字符串,可认为这个就是json参数。
要将JSON转换成为可GET/POST适合发送的名称/值(name/value)状态,你可以额外地将其编码:
创建一个GET的请求如下:
或是POST请求也行:
urlEncode()方法也是可以:
这样便可以通过GET/POST发送。至于另一边的服务端,会透过URIComponent解码这段参数:
来访问JSON已解码的数据。
在EXT 1.1,你可以轻松地使用Ext.Ajax.request()方法来创建一个典型AJAX的请求。该方法允许传入一个配置项的对象,即是可包含其它类型的内容,作为请求的参数的用途,下面引用API的介绍:
(原
文)params {Object/String/Function} (Optional) An object containing
properties which are used as parameters to the request, a url encoded
string or a function to call to get either.
(中文)params {Object/String/Function} (可选项) 包含请求参数的对象,以对象的属性形式出现,一段可url编码的字符串,或者是可返回以上两者的函数。
对于传入的是object类型, Ext.Ajax.request会调用Ext.urlEncode()将其转换为名称/值(name/value)的状态(通常情况忽略内嵌的对象)。
请求是这样的:
服务端解析为:
如不禁止disableCaching,Ext会加上唯一的_dc参数以消除缓冲。
每次送出的数据都是经过Ext.urlEncode(),很明显是没有发送完整的JSON,只是一连串的名称/值(name/value)的状态。
如果使用POST的方法,过程也是相同,区别是名称/值(name/value)的状态是放在POST BOBY内发送。
要
把JSON发送到服务器,我们需要使用Ext.encode()方法转换数据对象到文本格式的JSON。Ext.Ajax.request()允许传入一
段可URL编码的字符串,所以你既可以用
encodeURIComponent()编码参数,亦可直接是一个简单的对象,让Ext.Ajax.request()为你编码:
相类似地,服务端会解析为:
这样我们便可以访问JSON已解码的数据了。
var obj = { prop1: "a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/", prop2: ['x','y'], prop3: { nestedProp1: 'abc', nestedProp2: 456 } }
本文将会讨论如何把一个对象转换为JSON并将其发送到服务器。
使用Ext.urlEncode进行URL编码
首先我们看看Ext.urlEncode 这个方法(相对应的是Ext.urlDecode解码方法)。
Ext.urlEncode()不能用来处理JSON,Ext.urlEncode()只是负责在HTTP进行GET、POST请求时,将某个“普通的”
对象转换成名称/值(name/value)的状态。我这里说“普通”的意思是urlEncode只是将第一层属性编码,———数组自然没有问题但内嵌的
对象就不行了。 举例:
Ext.urlEncode(obj) == "prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D% 5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y"
注意属性3被忽略了
注意特殊字符都被编码了(使用JS自身的encodeURIComponent())
如果你只是想纯粹地发送一些的请求,可把参数写成JavaScript原生对象的形式,然后用这个方法编码urlEncode发送,———这是较方便的做法。
例如,你可以在一个GET请求的URL后面加上一段文本字符:
请求是这样的:
http://myurl.com?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5 D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y
服务器会透过URIComponent解码成为:
prop1 a0~`!@#$%^&*()-_+={}[]|/:;"',.?/ prop2 x prop2 y
你也可以同POST请求发送这样的内容:
请求是这样的:
http://myurl.com
POST内容:
prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%2 2'%2C.%3F%2F&prop2=x&prop2=y
服务器得到的结果是和GET请求的内容无异的。
这一切还顺利,但说到要发送和接受JSON,该怎么办呢?接下来再看!
使用Ext.encode编码JSON
Ext.encode() (其对应的解码方法为Ext.decode)转换一个复制的对象为一段JSON字符举例:Ext.encode(obj) == '{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"/',.?/", "prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}'
注意内嵌对象的属性现在被包含进去了
刚才是我们转换一个简单的对象到名称/值(name/value)的状态,现在的情况将有所不同,此时的对象已经被转换到(序列化)一段参数。具体的作用是,以名称/值(name/value)的形式,发送到服务器解析。如果只是发送一个JSON字符串,可认为这个就是json参数。
要将JSON转换成为可GET/POST适合发送的名称/值(name/value)状态,你可以额外地将其编码:
encodeURIComponent(Ext.encode(obj)) == "%7B%22prop1%22%3A%22a0~%60!%40% 23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C.%3F%2F%2 2%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedP rop1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"
创建一个GET的请求如下:
"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))
或是POST请求也行:
"json=" + encodeURIComponent(Ext.encode(obj))
urlEncode()方法也是可以:
Ext.urlEncode({ json: Ext.encode(obj)}) == "json=%7B%22prop1%22%3A%22a0 ~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C .%3F%2F%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%2 2nestedProp1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"
这样便可以通过GET/POST发送。至于另一边的服务端,会透过URIComponent解码这段参数:
{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/","prop2":["x","y"],"prop3": {"nestedProp1":"abc","nestedProp2":456}}
来访问JSON已解码的数据。
使用Ext.Ajax.request发送JSON
在EXT 1.1,你可以轻松地使用Ext.Ajax.request()方法来创建一个典型AJAX的请求。该方法允许传入一个配置项的对象,即是可包含其它类型的内容,作为请求的参数的用途,下面引用API的介绍:(原
文)params {Object/String/Function} (Optional) An object containing
properties which are used as parameters to the request, a url encoded
string or a function to call to get either.
(中文)params {Object/String/Function} (可选项) 包含请求参数的对象,以对象的属性形式出现,一段可url编码的字符串,或者是可返回以上两者的函数。
对于传入的是object类型, Ext.Ajax.request会调用Ext.urlEncode()将其转换为名称/值(name/value)的状态(通常情况忽略内嵌的对象)。
var req = Ext.Ajax.request({ url: "/ws/search.pl", params: obj, method: 'GET', disableCaching: false })
请求是这样的:
/ws/search.pl?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C %5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y
服务端解析为:
prop1 a0~`!@#$%^&*()-_+={}[]|/:;"',.?/ prop2 x prop2 y
如不禁止disableCaching,Ext会加上唯一的_dc参数以消除缓冲。
每次送出的数据都是经过Ext.urlEncode(),很明显是没有发送完整的JSON,只是一连串的名称/值(name/value)的状态。
如果使用POST的方法,过程也是相同,区别是名称/值(name/value)的状态是放在POST BOBY内发送。
要
把JSON发送到服务器,我们需要使用Ext.encode()方法转换数据对象到文本格式的JSON。Ext.Ajax.request()允许传入一
段可URL编码的字符串,所以你既可以用
encodeURIComponent()编码参数,亦可直接是一个简单的对象,让Ext.Ajax.request()为你编码:
var req = Ext.Ajax.request({ url: "/ws/search.pl", params: {json: Ext.encode(obj)}, disableCaching: false })
相类似地,服务端会解析为:
{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/","prop2":["x","y"],"prop3": {"nestedProp1":"abc","nestedProp2":456}}
这样我们便可以访问JSON已解码的数据了。
相关文章推荐
- Ext 介绍入门之 EXT 与json的交互
- Manual:Core:Working with JSON (EXT 与json的交互)
- (EXT之家)EXT 与json的交互
- Zp的Ext学习笔记(一)——坑爹的MVC(html中Extjs配置、proxy代理的前后台交互、json解析、后台处理传入json乱码)
- (EXT之家)EXT 与json的交互
- EXT 中json格式数据后台与前台的交互
- EXTJS学习系列基础篇:第四篇(转载)作者殷良胜,Ext中有两个很重要的方法,一个是decode;一个是encode.顾名思义,一个是编码,一个是解码,你难道真的这么想吗?严格的说,一个是将json字符串转换成对象;一个是将对象转换成json字符串
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- Springmvc(5)之多部件表单、json交互和拦截器
- springMVC学习(11)-json数据交互和RESTful支持
- ext上传文件,服务端返回json时发现的一个问题
- SpringMVC之json数据交互
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
- springMVC之与json数据交互方法
- 轉換 Ext.data.record 為 json 格式
- EXT的jsonstore使用
- 轻量级交互数据json格式初探
- 封装AJax实现JSON前台与后台交互
- Android与Javascript交互JSON对象
- Android 与 web后台数据交互之解析XML和JSON