(EXT之家)EXT 与json的交互

转载 2012年07月11日 08:56:57

有一段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
  • 服务器会透过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 containingproperties which are used as parameters to the request, a url encodedstring 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}}

(EXT之家)EXT 与json的交互

  有一段JavaScript如下: var obj = { prop1: "a0~`!@#$%^&*()-_+={}[]|//:;/",.?/", pro...
  • alex197963
  • alex197963
  • 2009年01月06日 17:33
  • 2282

EXTJs前后台交互

Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对象,也可以直接使用“n...
  • SJF0115
  • SJF0115
  • 2013年05月23日 10:31
  • 10430

扩展Ext的JsonReader

var MyJsonReader = Ext.extend(Ext.data.JsonReader, { read: function(response){ var json = r...
  • zhangzikui
  • zhangzikui
  • 2016年06月01日 17:02
  • 424

Ext 树 异步获取JSON数据

import="com.coship.dhm.portalMS.site.entity.Site"%> Panel .css" rel="stylesheet"...
  • okkeqin
  • okkeqin
  • 2014年03月11日 17:46
  • 1322

将Ext.Json.Store对象、数组对象转换称Json对象

    将Ext.data.Store对象或数组对象转换成Json对象,关键代码如下: /** * 将Ext.Json.Store对象 * 数组对象 * 转换成Json形式的字符串 * @pa...
  • sz_bdqn
  • sz_bdqn
  • 2010年04月02日 11:47
  • 6805

ext中对json数据的处理解析

(注:ext做客户端接收数据,返回的json数据必须要有存放载体,也就是ext中的Ext.data.Store) 1、Ext.form.ComboBox() 控件:(将json格式数据信息显示到下拉框...
  • xieshengjun2009
  • xieshengjun2009
  • 2010年10月22日 19:16
  • 16590

ExtJs 4.x 学习小记:json数据中的引号

Ext中有个把json字符串解析为json对象的方法 Ext.JSON.decode,如果json字符串汇总bao...
  • bdmh
  • bdmh
  • 2014年05月07日 14:35
  • 2592

EXT 字符串与js对象的转换

Ext.util.JSON.encode(params):   将JS对象转成字符串,常用于需要向后台传数据之前。 Ext.util.JSON.decode(params) :   将字符串转成JS...
  • linan0930
  • linan0930
  • 2013年10月11日 10:43
  • 3453

15、 EXTJs前后台交互

EXTJs前后台交互
  • DarrenMJ
  • DarrenMJ
  • 2016年03月24日 16:10
  • 273

ext ajax发送 json格式数据 设置content-type

Ext.Ajax.request({    method:post,     url: URL+/game/json,     success: function(data){     alert(d...
  • elfenliedef
  • elfenliedef
  • 2011年06月16日 15:08
  • 3979
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(EXT之家)EXT 与json的交互
举报原因:
原因补充:

(最多只允许输入30个字)