Ajax not receiveing data from controller

[eluser]keld[/eluser]
Hello,

I've been stuck on this issue for 2 days now and it's driving me nuts.
I'm working on an ajax star rating system.
Here's is my js:

Code:

$('div.rate_widget').each(function(i) {
        var widget = this;
        var out_data = {
            widget_id : $(widget).attr('id'),
            fetch: 1
        };
        $.ajax({
            url: base_url+"products/productRatings",
            data: out_data,
            type: "POST",
            cache: false,
            dataType: "json",
            success: function(data){
                if(data.length){
                    console.log("hello");
                }
            }

What happens here is I send my widget_id to my controller, in my controller I grab my product id and query the database to read the ratings of this product, then I do

Code:

echo json_encode($this->Mc_home->getRatings($product_id));

to return some data to ajax such as the average vote to be able to display the correct number of stars on the page.
What I get in return is a perfectly formed json object:

Code:

{
  "widget_id":"r_11",
  "nbvote":10,
  "total":36,
  "avg":3.6,
  "whole_avg":4
}

This data should now be returned to the ajax request but for some reason it does not. The "data" object in the success function is undefined according to firebug.
I checked the browser response and everything is in there but the jquery never gets it.

Am I missing something here?
I'm really stuck

Thank you.

[eluser]Italo Domingues[/eluser]
Hello Keld.

Use.

Code:

$.post(base_url+"products/productRatings", {widget_id: $(widget).attr('id'), fetch: 1}, function(data){ // Code  }, 'json')

[eluser]keld[/eluser]
Hey thanks! I didn't use post, I want to keep ajax but the problem was coming from

Code:

data: out_data

Using this works but I don't understand what's is the difference with what I had before.

Code:

data: {widget_id : $(widget).attr('id'), fetch: 1}

Thanks!