javascript - Having problems with jQuery, ajax and jsonp - Stack Overflow

I am using jsonp and ajax to query a web-service written in java on another server. I am using the following jquery mand:

$.ajax({
    type: "GET",
    url: wsUrl,
    data: {},
    dataType: "jsonp",
    plete: sites_return,
    crossDomain: true,
    jsonpCallback: "sites_return"
});


function jsonp_callback(data) {
    console.log(data);
}

function sites_return(data) {
    console.log(data);
}

So my problem is that after the query finishes a function called jsonp_callback is called. Where I can clearly see the json formatted string:

{"listEntries":["ELEM1", "ELEM2", "ELEM3", etc...]}

But after the function sites_return is called when the plete event fires, I get the the following:

Object { readyState=4, status=200, statusText="parsererror"}

Also for reference the jsonp_callback function is called before the sites_return function. Also if i take the jsonp_callback function out of the code, I get a plaint it firebug that the function is not implemented.

My question three fold: 1) What am i doing wrong on the jquery side? 2) Why does the json get parsed correctly in jsonp_callback but not sites_return? 3) What can i do to fix these issues?

EDIT

Some new development. Per the ments here is some additional information.

The following is what es out of the http response

jsonp_callback({"listEntries":["ELEM1", "ELEM2", "ELEM3"]})

I assume this is the reason jsonp_callback is being called. I guess my question now bees, is there any way to control this (assuming i don't have access to the back end web-service).

I am using jsonp and ajax to query a web-service written in java on another server. I am using the following jquery mand:

$.ajax({
    type: "GET",
    url: wsUrl,
    data: {},
    dataType: "jsonp",
    plete: sites_return,
    crossDomain: true,
    jsonpCallback: "sites_return"
});


function jsonp_callback(data) {
    console.log(data);
}

function sites_return(data) {
    console.log(data);
}

So my problem is that after the query finishes a function called jsonp_callback is called. Where I can clearly see the json formatted string:

{"listEntries":["ELEM1", "ELEM2", "ELEM3", etc...]}

But after the function sites_return is called when the plete event fires, I get the the following:

Object { readyState=4, status=200, statusText="parsererror"}

Also for reference the jsonp_callback function is called before the sites_return function. Also if i take the jsonp_callback function out of the code, I get a plaint it firebug that the function is not implemented.

My question three fold: 1) What am i doing wrong on the jquery side? 2) Why does the json get parsed correctly in jsonp_callback but not sites_return? 3) What can i do to fix these issues?

EDIT

Some new development. Per the ments here is some additional information.

The following is what es out of the http response

jsonp_callback({"listEntries":["ELEM1", "ELEM2", "ELEM3"]})

I assume this is the reason jsonp_callback is being called. I guess my question now bees, is there any way to control this (assuming i don't have access to the back end web-service).

• javascript
• jquery
• ajax
• jsonp

Share Follow edited Jun 13, 2011 at 13:50 sumone4life asked Jun 13, 2011 at 13:34 sumone4lifesumone4life 11333 silver badges88 bronze badges 3

• I think we're going to need to see all the JSON, because it's likely that there's something wrong with it that's causing that parse error. – Pointy Commented Jun 13, 2011 at 13:39
• Also, it's not clear why that "jsonp_callback" function is being called at all. – Pointy Commented Jun 13, 2011 at 13:40
• That is all the json there is. I replaced the actual elements with dummy names but the format is exactly the same (minus the etc... of course). The following is what es back in the response of the HTTP header. jsonp_callback({"listEntries":["ELEM1", "ELEM2", "ELEM3"]}). Looking at it, i assume the function is being called because that is how it is formatted in the http header. – sumone4life Commented Jun 13, 2011 at 13:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Hope this helps~

var url = "http://maps.google./maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false";
var address = "1600+Amphitheatre+Parkway";
var apiKey = "+Mountain+View,+CA";

$.getJSON("http://maps.google./maps/geo?q="+ address+"&key="+apiKey+"&sensor=false&output=json&callback=?",
  function(data, textStatus){
     console.log(data);
  });

I believe that the first argument to the sites_return function would be the jqXHR Object. Instead of plete try using success.

But still this may not work as it seems that there is a parsing error (mentioned in the return value of sites_return function called from onplete). Therefore, you would first need to check your json string.

To Validate JSON, you can use http://jsonlint./

I think that the problem is that your server is not behaving the way jQuery expects it to. The JSONP "protocol" is not very stable, but generally what's supposed to happen is that the site should look for the "callback" parameter and use that as the function name when it builds the JSONP response. It looks as if your server always uses the function name "jsonp_callback".

It might work to tell jQuery that your callback is "jsonp_callback" directly:

$.ajax({
    type: "GET",
    url: wsUrl,
    data: {},
    dataType: "jsonp",
    plete: sites_return,
    crossDomain: true,
    jsonpCallback: "jsonp_callback"
});

Not 100% sure however.

If you don't have the ability to change the JSONP function wrapper that the remote server returns, jQuery's $.ajax() may be overkill here. Ultimately, all you're doing is injecting a script reference to wsUrl, which makes a call to jsonp_callback with a JavaScript object literal as its input parameter.

You could just as easily do something like this and avoid the confusion around the callback naming/syntax:

$.getScript(wsUrl);

function jsonp_callback(response) {
  // Access the array here via response.listEntries
}