Unexpected token colon JSON after jQuery.ajax#get
To support JSONP requests, the server will have to include the P
, or "Padding," in the response.
jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})
The syntax error, "Unexpected token :"
, is because JSONP is parsed as JavaScript, where {...}
also represents blocks. It just takes advantage of JSON and JavaScript's similar syntax to define the data being passed to a global function call.
By default, jQuery will include a callback
query-string parameter with the name of the function:
var callback = req.query.callback;
var data = JSON.stringify({
Name : "Tom",
Description : "Hello it's me!"
});
if (callback) {
res.setHeader('Content-Type', 'text/javascript');
res.end(callback + '(' + data + ')');
} else {
res.setHeader('Content-Type', 'application/json');
res.end(data);
}
ExpressJS also includes res.jsonp()
that already implements this condition:
app.get( '/', function( req, res ) {
console.log( 'req received' );
res.jsonp({
Name : "Tom",
Description : "Hello it's me!"
});
});
Cross domain jquery ajax (Jsonp): Uncaught SyntaxError: Unexpected token : (colon)
The solution for this is to add a local proxy that your jQuery code will call. Your proxy will be server side code (PHP, Python, Ruby, etc) that forwards the query on to Valve and then returns it to your jQuery call. You will, however, have to use one of their supported formats (of which JSONP is not one).
A high level view of what you'll be doing:
- Create PHP file that accepts the parameters jQuery will be passing. In this case, it looks like account ID and matches you want to receive. Do not pass the API key, this should be stored in the PHP file
- In PHP, build your
steamurl
using the stored API key, and the two passed values - Issue a call to the Valve servers using this
steamurl
and retrieve the results. - Return this response to your ajax call
Your PHP will look something like this (and should include more error checking since I am just taking the $_GET
values as gospel:
$matches = $_GET['matches'];
$acct = $_GET['accountid'];
$APIKEY = <YOURKEYHERE>;
$steamurl = "https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=$APIKEY&account_id=$acct&Matches_Requested=$matches&format=json";
$json_object= file_get_contents($steamurl);
header('Content-Type: application/json');
echo $json_object;
Now you can use jQuery to parse this JSON response.
Uncaught SyntaxError: Unexpected token : valid JSON
To solve the error
No 'Access-Control-Allow-Origin' header is present on the requested
resource.
you should add some codes in your server. Java version:
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// ...
response.addHeader("Access-Control-Allow-Origin", "*");
// you can change * for your spec url.
// if * is used, any url can be access to the data.
// ...
}
and you can use dataType: 'json'
Use JSON data with a colon in Jquery Ajax call
$('#oaresult').html(
msg["ns1:AmplifyResponse"] // you have to use object["prop"] here
.AmplifyReturn
.Topics
.TopTopics[1]
.Topic.Name);
or
$('#oaresult').html(msg["ns1:AmplifyResponse"]["AmplifyReturn"]["Topics"]["TopTopics"][1].["Topic"]["Name'});
Related Topics
How to Detect a Textbox's Content Has Changed
How to Make Exe Files from a Node.Js App
JavaScript Asynchronous Return Value/Assignment with Jquery
How to Be Notified When an Element Is Added to the Page
How to Record Webcam and Audio Using Webrtc and a Server-Based Peer Connection
How to Access the Contents of an Svg File in an <Img> Element
How to Detect Element Being Added/Removed from Dom Element
JavaScript Filereader - Parsing Long File in Chunks
Securityerror: the Operation Is Insecure - Window.History.Pushstate()
Remove Whitespaces Inside a String in JavaScript
Switch Statement for Greater-Than/Less-Than
How to Call Reduce on an Array of Objects to Sum Their Properties
JavaScript Removeeventlistener Not Working
How to "Await" for a Callback to Return
Drop-Down Box Dependent on the Option Selected in Another Drop-Down Box