jQuery AJAX syntax error, unexpected token: ':' - javascript

Trying to make my first AJAX call to an API. When run Firefox's console returns SyntaxError: unexpected token: ':' with a link to the MDN docs about missing a semi-colon.
$.ajax({
type: "GET",
url: "url/to/API/here",
dataType: "jsonp",
jsonp: "callback",
success: function(data){
console.log(data.quoteText);
},
xhrFields: {
withCredentials: false
}
})
Following some other similar issues I've tried using JSON and not JSONP, but returns a CORS error (specifically CORS header 'Access-Control-Allow-Origin' missing) also tried using CrossOrigin to no avail either.

Related

Unexpected token : error when making Ajax json get request

I'm trying to make a cross domain ajax request to deezer, a music streaming api... and I'm getting an "Uncaught SyntaxError: Unexpected token :" error. I know it's because the data I'm getting back is not in proper json format, but I tried changing the datatype to 'json' from 'jsonp' and it's still not working...here's my request, any suggestions?
$.ajax({
url: "https://api.deezer.com/search?q=" + searchString + "&callback=?",
dataType: 'json',
jsonpCallback: 'callback',
type: 'GET',
success: function (data) {
console.log(data);
}
});
This is because you used unencoded second "?" in your url after first "?", which using for separate get-string. You need to remove this part of url + "&callback=?".

“Uncaught SyntaxError: Unexpected token <” when adding callback to external feed call

I am trying to pull a password protected xml feed from another website, but I am getting the following error:
"Uncaught SyntaxError: Unexpected token <"
I fixed the origin access error that I was getting previously by adding a callback function, but now I am getting this uncaught syntax error.
My code is:
$.ajax({
url: 'http://xxx.php?&callback=?',
dataType: 'jsonp',
type: 'POST',
username: 'xxxxx',
password: 'xxxxx',
crossDomain : true,
xhrFields: {
withCredentials: true
}
});
When I inspect the error I can just see 'denied' where the feed should be: screen shot of error
Any ideas why this is not working? Do I need to request something from the feed provider? Or is there something missing/incorrect in my code?
You try to load an xml and use dataType: 'jsonp'. jQuery can't handle the response because you tell the $.ajax function to use the response as JSONP. So the first char of the response < is unexpected.
Use dataType: 'xml' instead.
The denied seems to come from a wrong login too. Are you sure the username and password options are working for you? I got many problems using it this way. I would pefer to change your login to use beforeSend, like this:
$.ajax({
url: 'http://xxx.php?&callback=?',
dataType: 'xml',
type: 'POST',
crossDomain : true,
xhrFields: {
withCredentials: true
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('username:password'));
}
});

ajax call to webservice always results in error [duplicate]

This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 7 years ago.
I'm making the following call to a webservice:
$.ajax({
dataType:'json',
cache:false,
type: "GET",
url: url,
success: function (data) {
alert("success");
},
error: function (xhr, ajaxOptions, thrownError){
alert('Failed to subscribe.');
}
});
The webservice is hit and definitely returns json - I can hit it via the browser and get what I expect. In my site, the error function is always called.
using Fiddler I can see there is a 200 result - the only thing I notice is that in the response fiddler says
Response is encoded and may require decoding before inspection. Click here to transform.
When I click it, the response goes from being a load of random symbols to being my expected json.
Upon Googling this, I see suggestions of adding contentType: "application/json;charset=UTF-8", to my call.
This stops my webservice function from being hit at all.
I tried changing it to POST also, just to see if that was the issue...still doesn't work.
Can anyone point out what I', doing wrong?
EDIT:
I've just noticed I'm getting this in Chrome
Refused to set unsafe header "Accept-Encoding"
XMLHttpRequest cannot load http://localhost:57631/Api/Products/SubscribeEmailMeWhenAvailable/203/wrfw#wrwq.com?_=1447757623275. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:50217' is therefore not allowed access.
This message seems related to gzip compression.
Have you tried this ?
headers: { "Accept-Encoding" : "gzip,deflate,sdch" }
Result :
$.ajax({
headers: { "Accept-Encoding" : "gzip,deflate,sdch" }
contentType: "application/json; charset=utf-8",
dataType:'json',
cache:false,
type: "GET",
url: url,
success: function (data) {
alert("success");
},
error: function (xhr, ajaxOptions, thrownError){
alert('Failed to subscribe.');
}
});

SyntaxError: missing ; before statement jquery jsonp

I am using below code to access rest service hosted on another domain.
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType:"jsonp",
success: function(json) {
alert(json);
},
error: function(e) {
console.log(e.message);
}
});
I am able to get the data correctly, but I get this error in firebug in mozilla:
SyntaxError: missing ; before statement
{"Hello":"World"}
Can anyone suggest me what I am doing wrong here? Even though Json data is valid. I tried all the suggestions posted in this question But still I am getting same error.
If it's really JSON you ask for, don't set "jsonp" as dataType, and don't provide a callback :
$.ajax({
type: 'GET',
url: url,
contentType: "application/json",
success: function(json) {
alert(json);
},
error: function(e) {
console.log(e.message);
}
});
the format of JSON and JSONP are slightæy different
JKSONP is a function invocation expression
callback({"hellow":"world"});
whereas JSON is simply a serialized object
{"Hello":"world"}
fromyour posting it would seem that the server is returning JSON and not JSONP
So you either need to change the server to reply correctly (The actual callback name is a get parameter to the request). You should do this if you are using the ajax call across domains
If you are not using ajax across domains stick to regular JSON

jQuery ajax jsonp call always get unexpected token error

I've been wasting a great deal of time for something I think is so simple, yet there are no good examples that illustrate how and what the ajax call is doing.
This is my javascript code:
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
data: {
location: myLoc,
timestamp: myTime,
sensor: true
},
success: function(){alert('OK');},
error: function(){alert('FAIL');}
})
}
The variables "myLoc" and "myTime" are not the problem. In fact if I cut and paste the URI into my browser it works just fine and shows the data: https://maps.googleapis.com/maps/api/timezone/json?callback=jQuery18307430207263678312_1354817349576&location=36.7468422%2C-119.7725868&timestamp=1354817353&sensor=true&_=1354817353398
From what i've been reading, the "callback" parameter is automagically generated and somehow the code should be smart enough to call the success function or error function.
The error that chrome returns is "Uncaught syntax error unexpected token ':'"
The javascript code always calls the error function no matter what I try. I added a jsonpCallback parameter (didn't work), json parameter (didn't work), changed dataType to "json" (didn't work due to cross domain error).
Please help.
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
data: JSON.Stringify({
location: myLoc,
timestamp: myTime,
sensor: true
}),
success: function(){alert('OK');},
error: function(){alert('FAIL');}
});

Categories