[SOLVED] JSON data is being urlEncoded when sent via Ext.Ajax.Request

[pianoroy]

Hello friends,
I am making a JSON-RPC request via Ext.Ajax.request. The problem is, my request parameters are being urlEncoded against my will. (using ExtJS 1.1)

I am trying to send the following string:
'{"method": "addFieldRow", "params": {"fieldID": "4", "columnValuePairs": {"name": "Foo"}}, "id": 3}'

...but the server is receiving this string:
'%7B%22method%22%3A%20%22addFieldRow%22%2C%20%22params%22%3A%20%7B%22fieldID%22%3A%20%224%22%2C%20%22columnValuePairs%22%3A%20%7B%22name%22%3A%20%22Foo%22%7D%7D%2C%20%22id%22%3A%203%7D'

Here is the code that sends it:

Ext.Ajax.request(Ext.apply(this.createCallback(), {
url: Page.Ajax.Json.url, //a string to a local url, this is fine
method: Page.Ajax.Json.httpMethod, //"POST", this is fine too
params: requestData, //The above string. It goes in fine, comes out bad.
isUpload: false
));

Does anyone have an idea what to do?

Thanksamillion,
Roy

[devnull]

The code looks fine to me, I am betting it is something on the server end that is not decoding correctly.
Examine the XHR event using firebug to see what Ext is spitting out.

[pianoroy]

Thanks for the reply, devnull.
Actually, I copied/pasted the urlEncoded string in my first post from Firebug. That is what Ext is spitting out.

Side note: I tried using the Ajax.Request method from Prototype.js, and it works. I had to manually add calls to the Ext callbacks, though, and I'd rather get the first way working than resort to this:



var _this = this;
new Ajax.Request(Page.Ajax.Json.url, {
method: 'POST',
postBody: requestData,
onSuccess: function(transport) {
_this.success.apply(_this, [transport.responseText.evalJSON(true)]);
},
onFailure: function(transport) {
console.log("Something bad happened");
_this.failure.apply(_this);
}
});

[MaximGB]

Do not assign string to params, assign an object, it will be properly encoded (only values, not param names).


...
params: {
"method": "addFieldRow",
"params": {
"fieldID": "4",
"columnValuePairs": {
"name": "Foo"
}
},
"id": 3
}
...

[pianoroy]

Thank you MaximGB... but no, that doesn't work either. I tried passing in that object, but it sent the following as the body of the post message:

method=addFieldRow&id=2

It's still trying to urlEncode it, this time as string/string key-value pairs from the object.

So I guess the question here is, "Is there any way to send a string (or an object to be stringified) as the body of a Ext.Ajax.request without it urlEncoding it?"

[MaximGB]

There is xmlData alongside with params also. xmlData will be the body of the request, params will be added to url, the request content-type will be text/xml

[pianoroy]

That works, thanks!

Jack, if you see this, there should be a jsonData property for Ext.Ajax.request, as well as an xmlData property - so people can send JSON data with the correct headers.

For everyone's reference, here's the working code block to replace the code in my first post:


Ext.Ajax.request(Ext.apply(this.createCallback(), {
url: Page.Ajax.Json.url,
method: Page.Ajax.Json.httpMethod,
params: null, //to prevent an 'undefined' parameter from appearing
xmlData: requestData //same JSON string as above
}));


MaximGB is right, the Content-type header is "text/xml", which is wrong -- but Jayrock doesn't care :)