8

I dont get why i get so many different errors. I'm using Google Places API for a test, and using simply an ajax query call with callback, i receive back the json but in CHrome browser i get 

"Uncaught SyntaxError: Unexpected token :"

why the hell is that? I supposed Google does it right, and their json must be correct...so where could be the problem?

this is my code

$.ajax({
    dataType: "json",
    url: "https://maps.googleapis.com/maps/api/place/search/json?location=40.47,-73.58&radius=5000&sensor=false&key=MYOWN&name&callback=?",
    success: function(data) {
        console.log('success');
    },
    error: function(data) {
        console.log('error');
    }
});
Francesco
  • 24,839
  • 29
  • 105
  • 152
  • 3
    The problem is in your code. Could you please post it? – JaredPar Dec 14 '11 at 17:36
  • I dont think, this guy has the same problem as mine and nobody knows how to fix it http://stackoverflow.com/questions/7080050/google-places-api-error-with-jquery-ajax-call-html-attributions – Francesco Dec 14 '11 at 18:26

1 Answers1

4

You get this error, if a server returns plain JSON. As this is a cross-site request, jQuery has to use the JSONP-technique where the server-response is interpreted as script. This is the only way to do cross-site-requests in the browser.

The problem is that the server has to support JSONP and surround the JSON answer with a callback generated by jQuery. The response must look like that:

jQuery17101705844928510487_1324249734338({"data":"whatever"});

Server-Example with PHP:

<?php
header("Content-Type:text/javascript"); // avoid browser warnings
$request = new HttpRequest("http://programmingisart.com/json-data-source.php", HttpRequest::METH_GET);
$request->send();
$json_data = $request->getResponseBody();

// wrap the data as with the callback
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "alert";
echo $callback."(".$json_data.");";

Client-Example with jQuery:

<div id="json-result"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            dataType: "jsonp",
            url: "jsonp-wrapper.php",
            success: function(data) {
                $("#json-result").html(JSON.stringify(data));
            },
            error: function() {
                alert("error");
            }
        });
    });
</script>

You can replace the PHP-code with any other server-platform and do the required steps.

  • HTTP-Request to a JSON source
  • Wrap the JSON as with a callback-function
Tilman Schweitzer
  • 1,437
  • 10
  • 10
  • what does it mean "platform that can process HTTP requests directly" – Francesco Apr 19 '12 at 03:36
  • Within a website you have the same-origin-policy restriction, that says you can not access other domains via Ajax-Request (which are simple HTTP-Requests). But as you can load scripts from other servers, you or an api-provider can wrap data within a script and pass them to you with a callback. The problem is, that the api-provider has to support this technique, otherwise you have to do an request to the api on your server and do the wrapping in a script for yourself. – Tilman Schweitzer Apr 22 '12 at 21:09
  • Excelent proposal. A bit overloaded of steps because you have to use the php within your server, and test all php extensions are working properly to be able to print the JSON info. Since I did not have HttpRequest class in my php, I couldn't use your exact solution, instead I used `$json_data = file_get_contents($url);` and then I do the echo of the content, without any parenthesis, and parse it directly from html as a JSON. Nevertheless is a pain in the ___ having to do this and could not parse directly from html. It were one of two errors always, or `:` token, or One issue with permisions. – unmultimedio Aug 11 '13 at 10:33