(EXT) interaction between ext and JSON

A piece of JavaScript is as follows:

var obj = {
 prop1: "a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/",
 prop2: ['x','y'],
 prop3: {
  nestedProp1: 'abc', 
  nestedProp2: 456
}
}

This article will discuss how to convert an object to JSON and send it to the server.

Use Ext. urlencode for URL Encoding

First
First, let's take a look at the Ext. urlencode method (corresponding to the Ext. urldecode decoding method ).
Ext. urlencode () cannot be used to process JSON. Ext. urlencode () is only used to send a "common"
Object To the name/value (name/value) state. What I mean by "normal" here is that urlencode only encodes the first layer of attributes. --- arrays are naturally correct, but embedded
The object will not work. Example:

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"

• Note that attribute 3 is ignored.
• Note that all special characters are encoded (use the JS's own encodeuricomponent ())

If you only want to send some requests purely, you can write the parameters as JavaScript native objects and then use this method to encode urlencode for sending. --- this is a convenient method.

For example, you can add a text character after the URL of a GET request:

• The request is as follows:

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

• The server will be decoded as follows through uricomponent:

prop1 a0~`!@#$%^&*()-_+={}[]|/:;"',.?/
prop2 x
prop2 y

You can also send the following content in the same post request:

• The request is as follows:

http://myurl.com

• Post content:

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

• The server returns the same result as the GET request.

All of this went well, but what should I do if I want to send and accept JSON? Next, let's take a look!

Use Ext. encode to encode JSON

Ext. encode () (the corresponding decoding method is Ext. Decode). For example, convert a Copied object to a JSON string:

Ext.encode(obj) == '{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"/',.?/",
"prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}'

• Note: The attributes of embedded objects are now included.

We just converted a simple object to the name/value (name/value) state. The current situation will be different. At this time, the object has been converted to (serialized) a parameter. The specific function is to send it to the server for resolution in the form of name/value. If you only send a JSON string, you can think of this as the JSON parameter.

To convert JSON into the name/value (name/value) status that can be sent by get/post, you can encode it additionally:

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"

Create a GET request as follows:

"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))

Or POST request:

"json=" + encodeURIComponent(Ext.encode(obj))

The urlencode () method can also be:

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"

In this way, you can send messages through get/post. The server on the other side decodes this parameter through uricomponent:

{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/","prop2":["x","y"],"prop3":
{"nestedProp1":"abc","nestedProp2":456}}

To access the decoded JSON data.

Use Ext. Ajax. Request to send JSON

In ext 1.1, you can easily use Ext. Ajax. Request () to create a typical Ajax request. This method allows the input of a configuration item object, that is, it can contain other types of content, as the purpose of the request parameters, the following reference API introduction:

(Original
Text) 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.

(Chinese) Params {object/string/function} (optional) object containing request parameters, which appears in the form of object attributes, a URL-encoded string, or you can return the functions of both.

For the input object type, ext. ajax. request will call ext. urlencode () converts it to the name/value (name/value) State (usually ignore embedded objects ).

var req = Ext.Ajax.request({
    url: "/ws/search.pl",
    params: obj,
    method: 'GET',
    disableCaching: false
})

The request is as follows:

/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

The server resolves:

prop1 a0~`!@#$%^&*()-_+={}[]|/:;"',.?/
prop2 x
prop2 y

• If disablecaching is not prohibited, ext will add a unique _ DC parameter to eliminate the buffer.
• Each time the data is sent, it passes through Ext. urlencode (). Obviously, the complete JSON is not sent, but a series of name/value statuses.

If the post method is used, the process is the same. The difference is that the status of name/value is sent in post boby.

Yes
To send JSON to the server, we need to use Ext. encode () to convert the data object to JSON in text format. Ext. Ajax. Request () allows one
Segment can be URL encoded string, so you can use
The encodeuricomponent () encoding parameter can also be a simple object, so that Ext. Ajax. Request () is encoded for you:

var req = Ext.Ajax.request({
    url: "/ws/search.pl",
    params: {json: Ext.encode(obj)},
    disableCaching: false
})

Similarly, the server resolves the following:

{"prop1":"a0~`!@#$%^&*()-_+={}[]|//:;/"',.?/","prop2":["x","y"],"prop3":
{"nestedProp1":"abc","nestedProp2":456}}

In this way, we can access the decoded JSON data.