How to read data returned from JSNOP jQuery.ajax all

Question

I have set very simple php page which return rows feteched from mysql. On localhost my jquery page is

 $.ajax({
        url: "http://abcd.com/cccbsapp/test.php",

        // Tell jQuery we're expecting JSONP
        dataType: "jsonp",

        complete:function(data){
            console.log(data)
        }           
    })

but console.log shows

I am not been able to get the actual JSON array returned by my php page. But console/network tab shows the returned data.

So I know that data is returning from remote server, but how can I get it in $.ajax.

When I use dataType:"JSON", it give CORS error, so I am using JSNOP. I am not very experienced with that.

Answer 1

The problem here is, that in order to use JSONP, the server needs to reply in a special way, not just print the data in JSON format.

When using jsonp, jQuery sends a request to the server with callback=someFunctionName in the URL. In this case the server response should be

someFunctionName(HERE THE DATA)

Also, complete callback gets as first argument always the jqXHR object, not the returned data, because complete is called by jQuery in both - request success and error - scenarios. Better use success callback for fetching the data and error for handling errors or even the Promise interface (.done() and .fail() methods).

$.ajax({
    url: "http://abcd.com/cccbsapp/test.php",
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp"           
}).done(function (data) {
    console.log(data);
}).fail(function () {
    console.log("An error occured");
});

As an alternative way to using JSONP, you could just stick to normal JSON requests. To make Cross-Origin requests work, the server needs to include Access-Control-Allow-Origin header in the response, e.g.

header('Access-Control-Allow-Origin: *');

(instead of the * you can list domains that are allowed to query this API)