使用jsonp将回调参数添加到$ .ajax

Question

I am trying to implement jQuery ajax call for cross domain call using jsonp, and the code is like -

$.ajax({
    async:true,
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories'
        +'&storeID='+ storeId
        +'&callback=?',
    type: 'get',
    data: '',
    dataType: 'jsonp',
    success: PopulateCategoryObject,
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
});

function PopulateCategoryObject(results) {
    //populate the categories
}

I am confused here with the use of callback. If I remove success attribute of $.ajax and use callback=PopulateCategoryObject in place of callback=? like -

$.ajax({
    async:true,
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories'
        +'&storeID='+ storeId
        +'&callback=PopulateCategoryObject',
    type: 'get',
    data: '',
    dataType: 'jsonp',
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
}); 

the difference it makes is, it returns result like -

PopulateCategoryObject, jQuery172012112959187034678_1376976441013( // data here )

And, the function PopulateCategoryObject is not executed.

I am unable to figure it out how to set the callback function here? and why is "jQuery172012112959187034678_1376976441013" getting added here with the result?

Thanks In Advance.

Answer 1

Try

$.ajax({
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories' + '&storeID=' + storeId,
    jsonpCallback: 'PopulateCategoryObject',
    dataType: 'jsonp',
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
}); 

Answer 2

If you don't want your ajax call to cache: set the "cache" parameter to false ... otherwise set it to true .

Another thing...if you don't want to use "success" parameter to trigger your callback, try jquery $.deffer : Read this! : http://learn.jquery.com/code-organization/deferreds/examples/