parsererror after jQuery.ajax request with jsonp content type

Question

I am using jQuery Version 1.5.1 to do the following ajax call:

$.ajax({
    dataType: 'jsonp',
    data: { api_key : apiKey },
    url: "http://de.dawanda.com/api/v1/" + resource + ".json",
    success: function(data) { console.log(data); },
    error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); console.log(textStatus); }
});

The server responds with a valid json object:

{
  "response": {
    "type":"category",
    "entries":1,
    "params":{
      "format":"json",
      "api_key":"c9f11509529b219766a3d301d9c988ae9f6f67fb",
      "id":"406",
      "callback":"jQuery15109935275333671539_1300495251986",
      "_":"1300495252693"
    },
    "pages":1,
    "result":{
      "category":{
        "product_count":0,
        "id":406,
        "restful_path":"/categories/406",
        "parent_id":null,
        "name":"Oberteile"
       }
     }
   }
 }

But the success callback is never called, instead the error callback produces this output:

jQuery15109935275333671539_1300495251986 was not called
parsererror

Why does this happen?

I am using no additional libraries to jQuery.

EDIT:

If I try to make the ajax call with "json" as dataType instead of "jsonp", the server responds with an empty string.

Ng

Answer 1

JSONP requires that the response be wrapped in some kind of callback function, because it works by injecting a script tag into the document as a mechanism to load data from another domain.

Essentially, what happens is a script tag gets dynamically inserted into the document like so:

<script src="http://the.other.server.com/foo?callback=someFn"></script>

callback is dependent on the resource you're calling, it's common for the parameter to be callback though.

someFn is then used to process the returned data from the server, so the server should respond with:

someFn({theData: 'here'});

The someFn is passed as part of the request, so the server needs to read it and wrap the data appropriately.

This is all assuming you're grabbing the content from another domain. If so, you're limited by the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy

Atthia

The API in the question is a public API by a vendor. It just restricts the calls to be jsonp only. Jsonp calls are answered, but as a normal Json object. – Ng

In this example, someFn is the callback, and the server should respond with: jQuery15109935275333671539_1300495251986({...}); – Aceydeucy

Thank god, wish they'd add some f--ing documentation – Nonpros

I can't understand this one. You mean i need to wrap the response from the server with, eg: $callBack({$myJsonResult}); I'll do that one at the server side? – Trauma

@AdamMorris How is the server suppose to know the function ? I meand that long number in jQuery15109935275333671539_1300495251986 ? How do you pass that information to the server ? – Patsis

This method completely solved my parse error problem. – Glycerinate

Answer 2

After upgrading to Jquery 1.5 and attempting to make a call across domains I had the same problem. Eventually I found the $.getJSON worked. Specifically,

$.getJSON(url,
    function(data){
        yourFunction(data);
       return false;
    });

The URL I used was like this:

var url = WEB_SERVER_URL;
url = url + "&a=" + lat;
url = url + "&b=" + lng; ....
url = url + "&jsoncallback=?";

In the server, which is running on another server and I have control of this code was added:

PrintWriter writer = response.getWriter();
String jsonString = json.toString(JSON_SPACING);
String callback = request.getParameter("jsoncallback");
// if callback in URL and is not just the "?" (e.g. from localhost)
if (callback != null && callback.length() > 1)
{
    writer.write(callback + "(" + jsonString + ");");
}
else
{
    writer.write(jsonString);
}

(The json object is an instance of JSONObject, the code can be found here http://www.json.org/java/)

Fourposter

Answer 3

when you are using jsonp as datatype (making cross domain request) Jquery generate random function and append is to requested url as a querystring named callback (callback=?), you need to append response json data as a parameter of this function as given below -

url : http://www.dotnetbull.com/cross-domain-call.ashx?ref=jquery-jsonp-request
url call by ajax :
http://www.dotnetbull.com/cross-domain-call.ashx?ref=jquery-jsonp-request&callback=jQuery1510993527567155793_137593181353

Response data should look like this :

 string callback = context.Request.QueryString["callback"];

 if (!string.IsNullOrEmpty(callback))
   context.Response.Write(string.Format("{0}({1});", callback, jc.Serialize(outputData)));
else
   context.Response.Write(jc.Serialize(outputData));

Read more about : parsererror after jquery.ajax request with jsonp content type

Phenomenal

Answer 4

there is one little mistake :) You have to request .js and not .json.

$.ajax({
    dataType: 'jsonp',
    data: { api_key : apiKey },
    url: "http://de.dawanda.com/api/v1/" + resource + ".js",
    success: function(data) { console.log(data); },
    error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); console.log(textStatus); }
});

Ah and did you notice, that there is a client for the api ? https://github.com/dawanda/dawanda-api-client-js

Footloose

Thank you very much for your answer! The API works like a charm now :) I used the api client at first, but i want to stick with a jquery only approach. – Ng

You can use the client with jQuery as well. It will automatically detect Prototype or jQuery and use the given methods. (Y) – Footloose

Answer 5

You really shouldn't specify jsonp here. Just use json because you're just receiving a JSON string. json (json with padding) expects a javascript function execute. In that case you need to specify a "callback=" within your querystring. I guess that is.the reason why jQuery can't handle this aswell, there is a property with the name callback.

Feeder

I get an empty string as an answer if I just use json for the request. Could it be the api is broken? And if so, is there a way to hack this in js? – Ng

you mean "jsonp (json with padding)", not "json (json with padding)" – Kirkuk

Answer 6

Try reading the response into an object using $.parseJSON:

success: function(data) {
    var json = $.parseJSON(data);
}

Sungod

No that will not fix the parsererror after jQuery.ajax request with jsonp content type – Egin

Answer 7

Ensure that the service you are calling has the ability to return data in JsonP format.

If you are using asp.net webapi, you can use WebApiContrib.Formatting.Jsonp, it's open source.

Ensure that you have a line like below in WebApiConfig.Register.

config.Formatters.Insert(0, new JsonpMediaTypeFormatter(new JsonMediaTypeFormatter(), "callback"));

I was pulling my hair over this. Hope this helps someone.

Magbie

Answer 8

Not all servers support jsonp. It requires the server to set the callback function in it's results. I use this to get json responses from sites that return pure json but don't support jsonp (But might in the future):

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData()
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Tutelage

I really hoped this would work as it looked quite clever but jqXHR.responseText is always undefined... – Photoreceptor

Answer 9

The same problem I was getting until I have not appended parameter "callback=?" or "c=?" in url.

Like : "http://de.dawanda.com/api/v1/" + resource + ".json&c=?"

May solve your problem. It worked for me.

Interbrain