API works in the browser, not JS

Question

This URL outputs JSON in the browser

http://api.sfpark.org/sfpark/rest/availabilityservice?lat=37.7832776731&long=-122.405537559&radius=0.10&uom=mile&response=json

But when I use it with Jquery like below, it seems to output this error

{"STATUS":"ERROR","MESSAGE":"Error while retrieving availability.  Search parameters are not valid. callback is not a valid request parameter. _ is not a valid request parameter.","RESPONSE_SENT_TS":"2014-08-15T12:16:01.455-07:00","REQUEST_RECD_TS":"2014-08-15T12:16:01.450-07:00"}

And this is the code I'm using

var parkingUrl = "http://api.sfpark.org/sfpark/rest/availabilityservice?lat=37.7832776731&long=-122.405537559&radius=0.10&uom=mile&response=json";

$.ajax({
    url:parkingUrl,
    type:'GET',
    dataType:'JSONP',
    success: function(data){
        console.log(data);
    }
});

I changed `dataType:'text'` and got "No 'Access-Control-Allow-Origin' header is present on the requested resource.". [See this](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource). — showdev, Aug 15 '14 at 19:22
go to yql console, paste in this: 'select * from json where url="your url" ', check the json tab, type in a callback name, and use the url at the bottom instead of the orig. — dandavis, Aug 15 '14 at 20:47

score 0 · Answer 1 · answered Aug 15 '14 at 19:23

You are calling the webservice using JSONP. JSONP in jQuery works by adding a callback function to the url, so the url getting called becomes something like

http://api.sfpark.org/sfpark/rest/availabilityservice?lat=37.7832776731&long=-122.405537559&radius=0.10&uom=mile&response=json&callback=callbackfn

The webservice doesn't support this parameter. You have to use type:json and hope the webservice supports CORS.

Rolyataylor2 · Answer 2 · 2014-08-15T19:38:26.213

0

The error your getting is based on the server-side script.

It maybe that the server may not support JSONP you may want to try:

$.ajax({
    url:parkingUrl,
    type:'GET',
    success: function(data){
       console.log(JSON.parse(data));
    }
});

PHP code for the page

header('Access-Control-Allow-Origin: http://api.sfpark.org');

You could also try if that doesn't work you could try to pull the page info on the server side using PHP, or whatever you are using

$parkingURL = 'http://....';
echo file_get_contents($parkingURL);

edited Aug 15 '14 at 19:38

answered Aug 15 '14 at 19:23

Rolyataylor2

201
1
5

Right. Then it gives me `XMLHttpRequest cannot load http://api.sfpark.org/sfpark/rest/availabilityservice?lat=37.7832776731&long=-122.405537559&radius=0.10&uom=mile&response=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.com' is therefore not allowed access.` – Morten J Aug 15 '14 at 19:26
Ajax cant do cross origin requests because of security, this question helps resolve that http://stackoverflow.com/questions/17318426/cors-cross-domain-ajax-without-jsonp-by-allowing-origin-on-server I think you have to set this up on your server and place it in your header for the page, Edited above to show in PHP – Rolyataylor2 Aug 15 '14 at 19:29
added another option for pulling the info via server-side request. – Rolyataylor2 Aug 15 '14 at 19:38

score 0 · Accepted Answer · answered Aug 15 '14 at 19:28

0

According to their API docs, they do in fact support JSONP, you need to add this parameter:

&jsoncallback=callbackFunctionName

To your request url

answered Aug 15 '14 at 19:28

elzi

5,442
7
37
61

API works in the browser, not JS

3 Answers3