Issue with Ext.Ajax.request POST

Question

I'm noticing strange behavior when using Ext.Ajax.request to POST to a URL.

I have the following Ext.Ajax.request:

var url = url_posted_to.org,
    obj = 
    {
            "evaluation": {
                "evaluation_id":44216,
                "garden_id":37288,
                "eval_type":1,
                "score":15,
                "rating":"GD",
                "rating_year":2013,
                "best_of":"NADA!",
                "special_award_specified":null,
                "evaluator_id":"265",
                "nate_siegel_award":0,
                "rainbarrel":0,
                "date_evaluated":"1969-12-31T18:00:00",
                "comments":"",
                "scoresheet":{
                    "color":1,
                    "plant_variety":2,
                    "design":3,
                    "maintenance":4,
                    "environmental_stewardship":5
                }
            },
            "garden":{
                "garden_id":37288,
                "name":"Larry Opelt",
                "no_longer_exists":0,
                "raingarden":0
            },
            "geolocation":{
                "latitude":44.9615709,
                "longitude":-93.3353673,
                "accuracy":25
            }
        };   



Ext.Ajax.request({

        method: "POST",
        url: url,
        params:  obj,
        success: function (response) {
            alert('success: ' + response.responseText);

        },
        failure: function (e, jqxhr) {
            alert('failure!');
            alert(e.status);
        }
    }); 

For which I am getting the error: POST url_posted_to.org 500 (Internal Server Error).

The response headers for the form data look:

Form Dataview sourceview URL encoded
evaluation:44216
evaluation:37288
evaluation:1
evaluation:15
evaluation:GD
evaluation:2013

evaluation:NADA!
evaluation:
evaluation:265
evaluation:0
evaluation:0
evaluation:1969-12-31T18:00:00
evaluation:
evaluation:[object Object]

garden:37288
garden:Larry Opelt
garden:0
garden:0
geolocation:44.9615709
geolocation:-93.3353673
geolocation:25

However... this is the strange part... if the same request is made using jQuery's implementation of Ajax, everything is fine.

Here is the jQuery Ajax call:

$.ajax({
    type: 'POST',
    url: url,
    data: params,
    success: function(data, textStatus, jqXHR){
        if(data.result == 'success'){
        $('#results').html('RESULTS:<br>');
        $('#results').append(JSON.stringify(data, null, '<BR>'));
    } else {
        $('#results').html('ERROR:<br>');
            $('#results').append(JSON.stringify(data));
    }
    },
    error: function(jqXHR, exception, errorThrown  ){
        $('#results').html('ERROR:<br>');
    $('#results').append(jqXHR.status);
    },
    complete: function(){
        alert("ajax complete: "+data.result)
    },
});

And the response headers (which look very well formed):

evaluation[best_of] NADA!
evaluation[comments]    
evaluation[date_evaluated...    1969-12-31T18:00:00
evaluation[eval_type]   
evaluation[evaluator_id]    265
evaluation[nate_siegel_aw...    0
evaluation[rainbarrel]  0
evaluation[rating]  GD
evaluation[rating_year] 2013
evaluation[score]   15
evaluation[scoresheet][co...    1
evaluation[scoresheet][de...    3
evaluation[scoresheet][en...    5
evaluation[scoresheet][ma...    4
evaluation[scoresheet][pl...    2
evaluation[special_award_...    
garden[name]    Larry Opelt
garden[no_longer_exists]    0
garden[raingarden]  0
geolocation[accuracy]   25
geolocation[latitude]   44.9615709
geolocation[longitude]  -93.3353673

So, it looks like Ext.Ajax is doing something funky with the nested JSON. Any ideas?

Answer 1

You can also stick with params and call Ext.JSON.encode(obj):

Ext.Ajax.request({

    method: "POST",
    url: url,
    params:  Ext.JSON.encode(obj),
    success: function (response) {
        alert('success: ' + response.responseText);

    },
    failure: function (e, jqxhr) {
        alert('failure!');
        alert(e.status);
    }
});

I tried using jsonData (which definitely works for simple json objects), but found that it didn't correctly encode arrays nested inside my json object.

Answer 2

Try using the jsonData parameter instead of params:

Ext.Ajax.request({    
        method: "POST",
        url: url,
        jsonData:  obj,
        success: function (response) {
            alert('success: ' + response.responseText);
        },
        failure: function (e, jqxhr) {
            alert('failure!');
            alert(e.status);
        }
    });