- 浏览: 50359 次
- 性别:
- 来自: 西安
最近访客 更多访客>>
最新评论
-
black.angel:
你用的FCK是什么版本的?
EXT中嵌入FCK Editor -
tmartin:
学习了 好东西
EXTJS如何通过JSON与服务器通信
Manual:Core:Working with JSON (EXT 与json的交互)
JSON处理方法
有一段JavaScript如下:
- varobj={
- prop1:"a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/",
- prop2:['x','y'],
- prop3:{
- nestedProp1:'abc',
- nestedProp2:456
- }
- }
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%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y服务器会透过URIComponent解码成为:
prop1 a0~`!@#$%^&*()-_+={}[]|\:;"',.?/
prop2 x
prop2 y你也可以同POST请求发送这样的内容:
请求是这样的:
http://myurl.comPOST内容:
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服务器得到的结果是和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%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedProp1%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%22nestedProp1%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)的状态(通常情况忽略内嵌的对象)。
- varreq=Ext.Ajax.request({
- url:"/ws/search.pl",
- params:obj,
- method:'GET',
- disableCaching:false
- })
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()为你编码:
- varreq=Ext.Ajax.request({
- url:"/ws/search.pl",
- params:{json:Ext.encode(obj)},
- disableCaching:false
- })
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已解码的数据了。
译者姓名:Frank
译者博客:http://www.ajaxjs.com/blog/
发表评论
-
用来读取Excel 的JS 函数
2013-04-02 15:41 384/** * 读取EXCEL */ ... -
json-lib出现There is a cycle in the hierarchy解决办法
2009-05-16 02:46 768问题的出现 如果需要解析的数据间存在级联关系,而互相 ... -
如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
2009-10-12 03:37 1827前台部分很简单: 首先定义一个数组,用来储存STORE里的值 ... -
解决EXT DateField 用getValue() 发送到后台,后台取null的问题
2009-10-12 03:38 1054var searchContractDate = new Ex ... -
如何使开启了分页功能的EXT Combox可以自动选中非第一页的值
2009-10-12 03:40 764当我们在Combox 中定义了PageSize属性,那么Com ... -
一个Toolbar不够用,如何实现2个Toolbar并存
2009-11-12 07:52 793var grid = new Ext.grid.GridP ... -
为什么ext combox 下拉框不出现自动提示,自动选中
2009-11-12 07:55 927ext combox 如果想实现类似于 baidu 搜索时的提 ... -
如何做一个两列的FormPanel
2009-11-19 00:56 1380有时一个FormPanel 放很多输入框会变的很长,这时候需 ... -
你为什么要给store.reload()加params?
2009-12-22 08:03 2900今天之前,我在用reload 刷新页面的时候,一直是这样用的 ... -
Spket的安装和配置
2009-04-14 22:19 971一、Spket的安装 1、Plugin:最低要求: ecli ... -
EXT格式的处理
2009-04-14 22:25 735处理Grid中日期 DateField 可以 renderer ... -
EXT中嵌入FCK Editor
2009-04-14 22:26 747<!DOCTYPE html PUBLIC " ... -
EXTJS如何通过JSON与服务器通信
2009-04-17 09:29 1147How tocommunicate with server ... -
Ext的Store中的Fields如何读取JSON对象中的子字段
2009-04-08 17:57 3042有时候得到的JSON对象的字段是个对象,想获得这个对象的子字段 ... -
Extjs Ajax 乱码问题解决方案
2009-04-08 17:18 20062009年4月8日整理于乌海 乱码的原因 ...
相关推荐
我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象。如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?...
2.客户端将字符串转换为Json对象,将其绑定到页面上; 3.借用雅虎的播放器插件,将歌曲播放出来. 提示: 为了控制压缩包的大小,将原始的音乐文件删除,自行复制mp3文件到Music/Sungha_Jung目录下, Sungha_Jung这个...
参照博客C# JSON和对象之间互相转换用Winform进行了JSON和对象之间转化的呈现,并用Socket来传输JSON。原文链接:http://www.cnblogs.com/HCCZX/p/5238556.html
设计用于在服务器或Web Worker中生成虚拟节点,然后将其发送到客户端。 这个库可以序列化节点和补丁,但是由于底层的VirtualPatch结构,补丁JSON有点大。 有关更有效的补丁程序序列化算法,请查看 。 安装 npm ...
这是一个简单的在Android客户端连接Asp.Net进行上传或下载的示例,在Android客户端以psot形式发送请求到Asp.Net服务器端,服务器端接收到请求参数后判断是上传还是下载,并进行相应处理。 示例中传输的数据未实体类...
其主要目的是将JSON RGB对象数组(例如[{ r: 100, g: 50, b: 0 }, { r: 100, g: 50, b: 0 }转换为UART指令,例如'345,5,1,100,50,0;2,100,50,0,3,000,000,000,4,000,000,000,5,000,000,000;' ,并将其通过UART传递...
如何在不按照规范手动组装JSON的情况下将JSON发送到服务器? Jsona通过提供以下解决了这个问题: 从JSON到简化对象的转换器(一些非规范化的结构,很容易代表) 从简化对象到JSON的转换器(符合) 从“ reduxObject...
这是一个简单的模块,它采用JavaScript对象并将其转换为GraphQL查询,以发送到GraphQL服务器。 主要用于需要动态生成graphql查询的应用程序。 寻找新的维护者 目前,我与GraphQL的合作并不多,因此,如果有人热衷于...
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 语法 JSON.stringify(value[, replacer[, space]]) 参数说明: value: 必需,一个有效的 JSON 对象。 replacer: 可选。用于转换结果的函数...
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。 url: 发送请求的地址 data : (可选)...
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 语法 JSON.stringify(value[, replacer[, space]]) 参数说明: value: 必需, 要转换的 JavaScript 值(通常为对象或数组)。 replacer: 可选...
diver.js 深入研究DOM并将其转储为js对象。... 现在,它遍历完整的树并将具有名称的每个叶节点转换为其对应的对象文字符号。 叶节点的名称将转换为对象键,其值将是该键的值。 重要的是要注意,“选择” htm
由于 Ajax 应用程序非常适合将纯文本发送给服务器端程序并对应地接收纯文本,相比不能生成文本的 API,能生成文本的 API 自然更可取;而且,JSON 让您能够处理本地 JavaScript 对象,而无需为如何表示这些对象多费...
XML 也可以提供文本方面的类似益处,但用于将 JavaScript 对象转换成 XML 的几个现有 API 没有 JSON API 成熟;有时,您必须在创建和处理 JavaScript 对象时格外谨慎以确保所进行的处理能与所选用的 XML
它将启动一个express.js服务器,并在控制台中显示以下消息: Listening! 现在,在http://localhost:3000打开浏览器,您将看到: 尝试按“提交”。 这会: 使用JSON负载将POST请求发送到...
通过HTTP库向目标站点发起请求,也就是发送一个Request,请求可以包含额外的header等信息,等待服务器响应 获取响应内容 如果服务器能正常响应,会得到一个Response,Response的内容便是所要获取的页面内容,类型...
得到的内容可能是HTML,可以用正则表达式,页面解析库进行解析,可能是Json,可以直接转换为Json对象解析,可能是二进制数据,可以做保存或者进一步的处理 保存数据 保存形式多样,可以存为文本,也可以保存到数据库...
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。 url: 发送请求的地址data : (可选) ...
第一个流程:Ftp 连接器侦听 FTP 服务器位置并期望和 xml 文件,这会将 xml 转换为 JAXBObject(这部分是为了学习目的),将对象转换为 json,然后转换为 DbObject,最终使用 mongo 持久化在 mongoDB 中Mule 中的...