parse error callback function not called jquery ajax error?

Question

I have been trying all the methods that i have seen in the stack overflow asked by other users before.But none of them are working.Please hoping any of you would point me in the right direction

$.ajax({
 type: "get",
 dataType:'jsonp',
 params:jsonData,
 jsonp:false,
 jsonpCallback:"callbackfn",
 headers: { "api_key": "u5FocU4xLq2rBfZ1ZSV8o81R2usYzUEM3NaCinnV"},
  url: "http://localhost/url?name=xxx&email=xxxxxx@gmail.com",
 success:function(){
  alert("sucess function");
   },
  error: function(jqXHR, textStatus, errorThrown){
       alert(textStatus + " and<br> " + errorThrown);
    }
  });
 function callbackfn(data) {
   alert(data);
  }

the response is { "firstName":"John", "lastName":"Doe" }

Although the response is json,this rises an error

Parse error .callbackfn not called.

Javascript implements [hoisting](http://www.w3schools.com/js/js_hoisting.asp), so moving the function deceleration wouldn't change anything @devlincarnate — citysurrounded, Oct 03 '16 at 21:14
@citysurrounded yes.exactly.and do you know why this error is arising? — kevin, Oct 03 '16 at 21:15
Perhaps because the response from the service is not valid JSON (hence the parse error) — Rob M., Oct 03 '16 at 21:16
@RobM. but the response is json `{ "firstName":"John", "lastName":"Doe" }` — kevin, Oct 03 '16 at 21:22
@MarkSchultheiss what might be the other reasons that might rise this error? — kevin, Oct 03 '16 at 21:23
@kevin I'm doing a bit of research, there's a couple of possibilities. Do you know if your server supports JSONP for sure? — citysurrounded, Oct 03 '16 at 21:28
I dont know exactly,But the server i requesting is amazon aws — kevin, Oct 03 '16 at 21:31
I have created lamda function that send me the names of the pages that the user is administrator of when i make a get request to that api — kevin, Oct 03 '16 at 21:46
@kevin take a look at this post here: http://stackoverflow.com/questions/37436728/return-jsonp-via-aws-lambda-api-gateway describing how to accommodate jsonp callbacks in a lambda function on AWS. Is this at all helpful? I don't think your server is set up properly to handle jsonp. — citysurrounded, Oct 03 '16 at 22:02
@citysurrounded thankyou very much.I was searching for that only — kevin, Oct 03 '16 at 22:08
@kevin fantastic! if you run into any more trouble, try the solution I outlined in my answer below. Please mark as solution as well :) — citysurrounded, Oct 03 '16 at 22:28

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

In order to use a custom callback function with JSONP, you must declare its scope to be global, i.e.

window.callbackfn = function(data) {
    alert(data);
};

Why?

This is because successful JSONP responses return a new JavaScript file, that is, a JavaScript function call encapsulated in <script> tags. Since each script is independently evaluated in the global scope, any script's function you would like to be made available to another script must also be declared in the global scope. Thus all JSONP callback functions should be global.

EDIT

According to OP, the solution found here: Return JSONP via AWS Lambda/API Gateway did the trick. Issue had to do with an improper server-side JSONP response.

Rob M. · Answer 2 · 2016-10-03T21:34:05.730

0

Make sure that your response from the server is a function call with the response data as the argument. It appears you are just outputting JSON, but JSONP expects a function call with the response data. Your server response should look like this:

callbackfn({
  "firstName":"John",
  "lastName":"Doe"
});

You have jsonp: false with a jsonpCallback and dataType: 'jsonp' - which is odd, because you are also supplying a jsonp callback. Perhaps if you don't need JSONP due to cross-origin requests, you should remove the jsonpCallback argument and just manually call that function with the response:

$.ajax({
   type: "get",
   dataType:'json',
   params:jsonData,
   headers: { "api_key": "u5FocU4xLq2rBfZ1ZSV8o81R2usYzUEM3NaCinnV"},
   url: "http://localhost/url?name=xxx&email=xxxxxx@gmail.com",
   success:function(data){
     callbackfn(data);
   },
   error: function(jqXHR, textStatus, errorThrown){
       alert(textStatus + " and<br> " + errorThrown);
    }
});

edited Oct 03 '16 at 21:34

answered Oct 03 '16 at 21:26

Rob M.

35,491
6
51
50

M how can i check that? – kevin Oct 03 '16 at 21:29
I don't follow, you posted that the response is a plain JS object `{ "firstName":"John", "lastName":"Doe" }`, but JSONP responses must be the object wrapped in a function call to the supplied function name (`jsonpCallback=callbackfn`) - therefore the server response must be what I posted in my answer. – Rob M. Oct 03 '16 at 21:31
No.the response was like the code I have pasted in the question.so,is there any other mistake I was doing? – kevin Oct 03 '16 at 21:34
The mistake is that you are serving an improper response and either A) Cannot use JSONP with this backend or B) Need to alter the backend to serve the response in the format I posted. Please see http://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms for how JSONP works – Rob M. Oct 03 '16 at 21:35
but if i do that there is cross origin request problem.thats why i am using jsonp – kevin Oct 03 '16 at 21:37
@RobM. according to the [ajax documentation](http://api.jquery.com/jquery.ajax/): setting the `jsonp` option to `false` prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the `jsonpCallback` setting. For example, `{ jsonp: false, jsonpCallback: "callbackName" }`. Thus OP's request is not ill-structured in this regard. – citysurrounded Oct 03 '16 at 21:48
I think I ahve done the same.please see in the question. – kevin Oct 03 '16 at 21:57

parse error callback function not called jquery ajax error?

2 Answers2

Why?

EDIT