PDA

View Full Version : AJAX call with large data as parameter



logicmedia
10 Aug 2010, 6:51 AM
Hi all,

Any help on this one is appriciated. It might be simpel, I just don't know how :-)

In my touch application I normally do AJAX calls this way:



Ext.util.JSONP.request({
url: 'xhr/xhrHandover.asp',
callbackKey: 'Ext.util.JSONP.callback',
params: {
cmd: 'savesignature',
synid: me.synid,
data: me.tp.canvas.toDataURL()
},
callback: function(data) {
}
});
But in this case - where I try to pass the data from a canvas element I get an "414: Requested URI too long". How do I pass large data via AJAX using Ext Touch?

Thanks in advance.

- Thomas

evant
10 Aug 2010, 6:53 AM
You don't use JSONP if you're sending data on the same domain. Just use an Ajax request, which will use POST.

logicmedia
10 Aug 2010, 7:45 AM
Thanks for the hint Evan. Don't know why I never used the Ext.Ajax.request, but I'm going there now... I do encounter one problem though. The JSON I return will not be decoded. It basically boild down to one simplified line of code:


var obj = Ext.decode('{ success: true, login: true }');

which throws the error:

ext-touch-debug.js:5530 - SyntaxError: Unable to parse JSON string

Is this not the intent of the decode function??

hendricd
10 Aug 2010, 3:00 PM
You'll need this format



'{ "success": true, "login": true }'
..as Touch uses the browsers' internal JSON object for parsing.

evant
10 Aug 2010, 3:28 PM
jsonlint.com will be useful.

Everio
11 Aug 2010, 12:21 AM
Is it possible to send date using POST with Sencha Touch ? How to do this ?

evant
11 Aug 2010, 12:40 AM
As I said above, just use an Ajax request with the params property. The data will be posted automatically.

Everio
11 Aug 2010, 12:51 AM
var formBase = {
scroll: 'vertical',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'name',
label: 'Nom',
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Mot de passe'
}]
}
],
listeners : {
submit : function(form, result){
//console.log('success', Ext.toArray(arguments));
},
exception : function(form, result){
//console.log('failure', Ext.toArray(arguments));
}
},

dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Vider les champs',
handler: function() {
form.reset();
}
},
{xtype: 'spacer'},
{
text: 'Connexion',
ui: 'action',
handler: function(){
$.ajax({
dataType:'jsonp',
type: 'POST',
url: 'http://www.***.com/***/***.php',
data: { name: 'aa',
password: 'zz'
},
success:function(reponse) {
//alert('plop');
}
});
}

}
]
}
]
};

I try this, but the request seemed not to be sent to the another server.

Everio
11 Aug 2010, 1:47 AM
And I tried this too but data aren't sent in POST :
(I wrote with and without 'type=POST')

Ext.util.JSONP.request({
url: 'http://dev.***.com/***/***.php',
callbackKey: 'callback',
type:'POST',
params: {
name: 'aa',
password: 'zz'
},
callback: function(result) {
alert('ee');
}
})

evant
11 Aug 2010, 2:01 AM
You can't send posts over JSONP, please read up on it: http://en.wikipedia.org/wiki/JSON#JSONP

Everio
11 Aug 2010, 8:13 AM
Yes I found this, but I just find that my problem is about JQuery because I tried to write this code, and I got the same problem :

$.ready(function(){
$.ajax({
type: 'POST',
url: 'http://www.***.com/***.php',
success:function(reponse) {
alert(reponse);
},
error: function(reponse){
alert('glurp');
}
});
});

Thank you for trying.