Question

I’m facing the same issue, while trying for cross-domain request. Situation is strange, my data is getting loaded while hit the requested url directly on browser, the strange part is, this gets loaded if requested using jquery ajax as well,
but not on firebug console, but on firebug net tab.
Console prints:
Sample of error data: parsererror {while json data is well-formed and formatted, checked on json validators}

readyState: 4 status: 200 responseText: undefined

Net tab loads all the data in response and json sub-tab

My sample code is:

function fetchJsonData() {
$.ajax({
    type: 'POST',
    url: 'http://www.meilleurmobile.com/comparateur/resultats-comparateur-json.do',
    data: 'monthDur%5B0%5D=45.75&monthDur%5B1%5D=45.75&monthDur%5B2%5D=45.75&monthDur%5B3%5D=45.75&monthDur%5B4%5D=45.75&monthDur%5B5%5D=45.75&monthDur%5B6%5D=45.75&monthDur%5B7%5D=45.75&monthDur%5B8%5D=45.75&monthDur%5B9%5D=45.75&monthDur%5B10%5D=45.75&monthDur%5B11%5D=45.75&numSms=1000&dataVolume=1000&withoutMobile=-1&commitmentDuration=-1',
    async: false,
    cache: false,
    //contentType: 'application/json; charset=utf-8',
    crossDomain: true,
    dataType: 'jsonp',
    error: function( xhr,err ) {
        console.log( 'Sample of error data:', err );
        console.log("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\nresponseText: "+xhr.responseText);
    },
    success: function( data ) {
        if (console && console.log) {
            console.log( 'Sample of data:', data.slice(0,100) );
        }
    }
})
.done(function() { alert("success"); })
.fail(function() { alert("error"); });

}

Answer 1

Attempted cross domain XMLHttpRequest requests may fool you. In Firefox web console, it may look like URL loaded fine, but body is an empty string.

Confirm that the server supports JsonP. If you don’t really know what that means, you need to look it up. It is critically important.

jQuery assumes that the JsonP parameter is going to be “?callback=”. If that is not true, you should see this: http://api.jquery.com/jQuery.ajax/

jsonp: Override the callback function name in a jsonp request. This value
will be used instead of ‘callback’ in the ‘callback=?’ part of the
query string in the url. So {jsonp:’onJSONPLoad’} would result in
‘onJSONPLoad=?’ passed to the server. As of jQuery 1.5, setting the
jsonp option to false prevents jQuery from adding the “?callback”
string to the URL or attempting to use “=?” for transformation. In
this case, you should also explicitly set the jsonpCallback setting.
For example, { jsonp: false, jsonpCallback: “callbackName” }

jsonpCallback: Specify the callback function name for a JSONP request. This value
will be used instead of the random name automatically generated by
jQuery. It is preferable to let jQuery generate a unique name as it’ll
make it easier to manage the requests and provide callbacks and error
handling. You may want to specify the callback when you want to enable
better browser caching of GET requests. As of jQuery 1.5, you can also
use a function for this setting, in which case the value of
jsonpCallback is set to the return value of that function.

If it gets confusing, it may be easier to just do it the old fashioned way and appends the script to the page yourself with a time stamp in the URL to avoid using a cached script page.

BTW, AFAIK, there is no way to combine JSONP and POST. JSONP is a way of working around the same origin security policy of XMLHttpRequest. It requires you to append a script to the DOM. I don’t think you can do that and also submit POST variables as part of the process.