Token error when parsing return data in Ajax call

Question

I am creating an app using HTML, jQuery Mobile, jQuery and Cordova. My requirement is to authenticate an user from the app by calling a remote server. I am developing my localhost WAMP stack.

My jQuery is as below.

$.ajax({
    type: 'POST',
    url: 'http://localhost/server/',
    crossDomain: true,
    data:{appkey:'1234567',action:'authenticate', username: u, password :p},
    dataType: 'jsonp',
    async: true,
    success: function (data){
        console.log(data);
     },
     error: function (jqXHR, textStatus, errorThrown) {
         alert("Invalid Username or Password");
         window.location = "index.html";
     }
});

The remote call url is below. JQuery automatially adds ?callback= to the remote url as the datatype is jsonp, which is fine.

localhost/server/?callback=jQuery18306688079617451876_1383495199431…4567&action=authenticate&username=fdf&password=fdfdf&_=1383495208981

The response from the remote url is as below in Chrome Developer console.

{"success":"false"}

In the PHP part at server, I am using the below code to return the json object.

header('Content-type: application/json');
echo json_encode($araryVal);

It looks for me that all things are perfect, but my code breakpoint never reaches the success section of the ajax call. It always break out in error section.

In the developer console I see the error message.

Uncaught SyntaxError: Unexpected token :

JsonLint says the json is valid. Please let me know what I am doing silly.

Fabio Beltramini · Accepted Answer · 2013-11-03 17:16:32Z

2

I don't think your data type is JSONP, it's just JSON. If it were JSONP, your content-type should be "application/javascript" and your response text should wrap the JSON object it returns with the javascript function provided to the server in the callback parameter.

(Actually your error is probably PHP emitting a notice about an undefined variable: araryVal ... You sure that shouldn't be arrayVal? :)

answered Nov 3, 2013 at 17:16

Fabio Beltramini

2,5211 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Purus Over a year ago

Changing the MINE to application/javascript does not help.. still the same. The error is from javascript and not from PHP :)

Mike Edwards Over a year ago

I think Fabio is correct. {"success":"false"} is valid JSON, not valid JSON-P. You should be seeing jquery_1598713487698({"success":"false"}) or something similar. The P in JSONP is the jquery_1598713487698() padding. On the server side you need to re-emit the callback= get parameter as a wrapper around your JSON.

Fabio Beltramini Over a year ago

Yea, thanks Mike for explaining better. Another option is to not tell jquery that the datatype is "jsonp", but instead "json"

Purus Over a year ago

I accept this as the solution. I changed the PHP code to include the callback function name along with the json output. I will edit my question to post what I actually did.

Purus · Accepted Answer · 2013-11-03 19:50:59Z

1

I already accepted the answer provided by @Fabio. I just want to provide the technical details which solved my problem.

The hint from Fabio helped me to do some research on this. Thanks man.

I have added the callback options to the ajax call as below.

$.ajax({
    type: 'POST',
    url: 'http://localhost/server/',
    crossDomain: true,
    data:{appkey:'1234567',action:'authenticate', username: u, password :p},
    dataType: 'jsonp',
    contentType: "application/javascript",
    jsonp: 'callback',
    jsonpCallback: 'mycallback',
    async: true,
    success: function (data){
        console.log(data);
     },
     error: function (jqXHR, textStatus, errorThrown) {
         alert("Invalid Username or Password");
         window.location = "index.html";
     }
});

The remote call url is as below after the above change. JQuery now add "mycallback" instead of some random callback value "jQuery18306688079617451876_1383495199431…4567" for callback parameter.

localhost/server/?callback=mycallback&action=authenticate&username=fdf&password=fdfdf&_=1383495208981

In the PHP side I modified the output to include the callback value with the json string.

header('Content-type: application/javascript');
echo "mycallback(" . json_encode($araryVal) . ")";

Today was the day I understood how to use jsonp with callback. Thanks to all.

edited Nov 3, 2013 at 19:50

answered Nov 3, 2013 at 18:04

Purus

5,8499 gold badges55 silver badges92 bronze badges

2 Comments

Fabio Beltramini Over a year ago

PS. The content-type seems to still be set to application/json . If you're providing it for the reference of others, you should make it the correct mime-type of application/javascript

Mike Edwards Over a year ago

Yes, JSONP is actually javascript not just JSON.

Collectives™ on Stack Overflow

Token error when parsing return data in Ajax call

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related