PDA

View Full Version : [SOLVED] JSON data is being urlEncoded when sent via Ext.Ajax.Request



pianoroy
16 Aug 2007, 10:59 AM
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
16 Aug 2007, 12:14 PM
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
16 Aug 2007, 12:53 PM
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
16 Aug 2007, 12:55 PM
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
16 Aug 2007, 1:12 PM
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
16 Aug 2007, 1:16 PM
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
16 Aug 2007, 1:40 PM
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 :)