Search code examples
javascriptjqueryjsonjsonp

JQuery Cross Domain GET Request Not Working


I am trying to set up a simple interface to test the Basecamp API. I have set my dataType = jsonp to avoid the cross-domain issue. When making the call I can see in the inspector that the response is sending back properly formatted JSON. However my error alerts show 4 and 200 but then the response text is 'undefined'. I am assume I am not properly converting from the jsonp to json but do I need to given I get the response I want? Or am I not accessing the response correctly.

Code:

function findAllProjects() {
    console.log('findAllProjects');
    $.ajax({
        type: 'GET',
        url: rootURL + "projects.json",
        username: "username",
        password: "password",
        crossDomain: true,
        //contentType: "application/json",
        dataType: "jsonp", // data type of response

        success: function(data) {
            alert(data[0].id);
            console.log("Success function!");
            console.log(data);
        },

        error: function(xhr, err) {
            //alert("Error!");
            alert("readyState: "+ xhr.readyState+"\nstatus: "+ xhr.status);
            alert("responseText: "+ xhr.responseText);
        },
    });
}

Solution

  • Your URL is for a .json file, but JSONP requires a JavaScript file that is specially formatted to pass the result into a function you control (or, managed by jQuery since you're using it). Either way, the server needs to support JSONP, you can't just request a JSON file and coerce it into a JSONP interaction.