有一段JavaScript如下:
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
prop1 a0~`!@#$%^&*()-_+={}[]|/:;"',.?/
prop2 x
prop2 y
你也可以同POST请求发送这样的内容:
http://myurl.com
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
这一切还顺利,但说到要发送和接受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已解码的数据了。
相关推荐
在大家开发的系统中,如果程序用ExtJS做表现层,那么就需要使ExtJS开发的界面和后台Java代码中生成的数据交互,一般来说,可以选 择XML格式和Json格式的数据进行交互,但是XML格式的数据操作相对繁琐,因此,大部分...
NULL 博文链接:https://ganliang13.iteye.com/blog/1547401
json Ext4 treejson
用ext + xml文件 完成 ext tree panel 树结构。延迟加载,支持 多选 单选。前后台数据交互使用的是 json串,挺不错的
ext前后台交互实例,主要以json形式传递数据。
全书一共22章:第1章简要介绍了学习ext js必备的基础知识、json、ext js 4的新特性,以及其开发工具的获取、安装与配置;第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化,以及一个经典的入门示例;...
Ext.Net.dll Ext.Net.Utilities.dll Newtonsoft.Json.dll 前台和后台的最佳交互
9.4.4 盒子布局、垂直布局与水平布局:ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5 为盒子模型提供调整大小的功能:ext.resizer.splitter / 445 9.4.6 手风琴...
本系统是采用Ext和ASP.NET编写的一个基于WEB的实时聊天系统...数据传输采用的是JSON数据格式,.NET通过加载一个DLL文件即可将对象转换成JSON格式,该文件也在压缩文件内,希望可以帮帮对Ext与.NET交互不太清楚的朋友。
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图;第10章和第11章分别详细介绍了重构后的gird和与gird同源的树;第12~16章分别讲解了表单、窗口、按钮、...
用EXT+struts2+spring+hibernate做的一个增删改查实例,主要用到了EXTjs里面的部分组件,用JSON与服务端交互,实现一个增删改查的功能!本地MYsql数据库,sql文件在根目录下面,建好库既可以运行!当然,还是需要在...
学习Ext与服务器交互的时候,需要的jar包文件,不多说,都懂的。
ExtJS由一系列的类库组成,一旦页面成功加载... 实用工具Utils:Ext提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能.
和json转换字符及编码有关系 json转换java对象 ,java对象转换json的必备良药
最近用到ext与PHP交互,ext把json数据post给PHP,但在PHP里面$_post获取不到,$_REQUEST也获取不到,但是通过firedebug看到的请求信息确实是把JSON数据post给了PHP,这什么情况
如果要在JavaScript中与RDF进行更高级的交互,则可以考虑图形遍历库clownface以及在clownface之上的另一个抽象RDFine 。 RDF-Ext提供了技术基础,并且包含在两个项目中。 用法 通常,有关如何与库交互的详细信息,...
用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...
解题思路1 : 重载Connection类 由于extjs和server端交互全都是 json格式的数据交互,server端不会控制页面的跳转,页面跳转,提示功能全都有extjs来完成。 extjs和server端的交互方法全都是继承自 Ext.data....
注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...
动手:Chrome扩展程序 为NS前端团队动手的Chrome扩展程序创建的功能扩展。 正在安装 打开地址chrome://extensions Chrome上...参见popup.js脚本与inject.js通信的inject.js ,后者与页面进行交互并处理图像。 :) 推介会