CODEWITHSUNDEEP
jqueryajaxjsonjsonp
Dave
Dave

Reputation: 17

Trying to access returned JSONP data via jQuery.ajax()

I have returned JSONP data that is displaying in the console formatted properly.

group({
  "blah": "blah",
  "blahblah": "blahblah",
  "blahblahblah": "blahblahblah"
});

This is my ajax call.

$.ajax({
  type: 'GET',
  url: 'test.php',
  dataType: 'jsonp', 
  cache: false,
  jsonpCallback: 'group',
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  },
  success: function(group){
    console.log(group);
    $('#theTest').append(group.name);
  },
  error: function(response1, response2, response3){
    console.log("Fail!");
    console.log(response1);
    console.log(response2);
    console.log(response3);
  }
});

The JSON is wrapped with 'group'. When I try and access that data though, I am unable to do so.

I'm confused as to why everything it's being returned this way. Can someone point me in the right direction?

Upvotes: 0

Views: 83

Answers (2)

Byob
Byob

Reputation: 625

The error is in your server side response. The way JSONP works is, you specify a known callback parameter that will get passed to the GET request. On the server side, you need to extract that parameter to get the encapsulating method call for your JSON padding.

On your example with jsonpCallback: 'group', your server side needs to:

    $methodName = $_GET['group']
    $response = $methodName . '(' . <YOUR JSON RESPONSE> . ');'
    echo $response

Upvotes: 0

Musa
Musa

Reputation: 97672

Your ajax request is incorrect, it should be something like

$.ajax({
  type: 'GET',
  url: 'test.php',
  dataType: 'jsonp', 
  cache: false,
  jsonpCallback: 'group',
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  },
  success: function(group){
    console.log(group);
    $('#theTest').append(group.name);
  },
});

dataType, cache and callback are not to be passed as data fields and datatype should be jsonp

Upvotes: 1

Related Questions