CODEWITHSUNDEEP
javascriptjqueryjsonjquery-mobilecordova
Purus
Purus

Reputation: 5799

Token error when parsing return data in Ajax call

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.

Upvotes: 0

Views: 283

Answers (2)

Purus
Purus

Reputation: 5799

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.

Upvotes: 1

Fabio Beltramini
Fabio Beltramini

Reputation: 2511

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? :)

Upvotes: 2

Related Questions