Obtain JSON response from URL with AJAX using Javascript

Question

I'm relatively new to Javascript and I'm stuck trying to obtain a JSON data from an URL using AJAX.

The url returns an array on characters that I want to request/obtain and then handle the data to show it in html. That url is: http://stark-tundra-9859.herokuapp.com/locations

The code that I'm using is the following, and the problem is that it appears as if I received nothing for response. Besides I dont know what the request info variable should be:

function ajax_request() {

requestInfo='';

var params = JSON.stringify(requestInfo);

$.ajax({
  type: "GET",
  url: 'http://stark-tundra-9859.herokuapp.com/locations',
  data: params,
  contentType: "application/json",
  dataType: "json",
  converters: {
    'text json': true
  },

  success: function(response) {
    $("#responseParagraph").html(response);

  },
  error: function(error) {
    $("#responseParagraph").html(error.responseText);

  }
});

}

@agam360, I also have done a version of this code using JQUERY and I do receive a message in the console which goes as follows:

GET http://stark-tundra-9859.herokuapp.com/locations 200 OK 198ms

Response header Connection keep-alive Content-Length 154 Content-Type application/json;charset=utf-8 Server thin 1.5.1 codename Straight Razor X-Content-Type-Options nosniff

Request header Accept application/json, text/javascript, /; q=0.01 Accept-Encoding gzip, deflate Accept-Language es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3 Connection keep-alive Host stark-tundra-9859.herokuapp.com Origin null User-Agent Mozilla/5.0 (Windows NT 6.1; rv:16.0) Gecko/20100101 Firefox/16.0

The code used to receive that answer is the following:

function json_request() {

$.getJSON(url,
    function(data) {
        alert(data);
        $('#responseParagraph').append("<p>"+data.responseMessage+"</p>");
    });

}

In this JQUERY very It seems as if I dont receive the DATA from the JSON request correctly. Maybe I am handling it erronously?

I would greatly appreciate any help in advance!

Since this appears to be a foreign domain and it seems to only return JSON (and not JSONP), you can't use Ajax to directly connect to it. See en.wikipedia.org/wiki/Same_origin_policy. — Felix Kling
– Felix Kling, Commented May 31, 2013 at 14:12
Is your website also running on stark-tundra-9859.herokuapp.com? — gen_Eric
– gen_Eric, Commented May 31, 2013 at 14:12
Also, I don't you can use contentType: "application/json" (or JSON.stringify) with a GET request (P.S. contentType is for the request, not the response). — gen_Eric
– gen_Eric, Commented May 31, 2013 at 14:16
It is indeed a foreign domain (which I set up for testing), so @FelixKling which one would be my solution here to request this JSON data from this URL? — Jose Sabas
– Jose Sabas, Commented May 31, 2013 at 14:24
@JoseSabas, isn't the json_request() working? what happens now? — funerr
– funerr, Commented May 31, 2013 at 14:40

Community · Accepted Answer · 2017-05-23 12:18:53Z

2

To answer this question I will need to ask you two things:
1) On what domain are you running this script? (on the same server as "http://stark-tundra-9859.herokuapp.com/" ?)
Because that URL does not allow CORS (Cross-Origin Resource Sharing)

2) Open up your console (in chrome: Ctrl+shift+j) and tell us what error message
you get, if you get any.

If your answer to the first question is no (meaning you are not running the script on the same host) then, if you have control over that page, enable CORS by sending the following header (please read some info about this, related to security before implementing):

Access-Control-Allow-Origin: *

More language specific implementations can be found on enable-cors.org (You can also read about 'JSONP' implementations regarding cross domain requests - if your not willing to use CORS).

On the other hand, (your answer is yes), we will need to see your server-side related code, and any error messages thrown on the client side.

Note: From what I see (as to now - 5 minutes after posting my answer), the http://stark-tundra-9859.herokuapp.com/locations URL returns a "500 - Internal server error" - Your problem seems to be related to server side of things.

Update, You need to acess your data as a JSON object after you got it,
like so:

data[0].lat // will hold the lat value of the first object in the JSON wrapper object

As to implementing JSONP with jQuery, I ran a quick search in SO, here is something you will probably want to take a look at: jQuery AJAX cross domain

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 31, 2013 at 14:17

funerr

8,31417 gold badges91 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jose Sabas Over a year ago

Thanks @agam360, To answer your questions: 1)No, I'm not running this script on the same domain. 2) The console appears blank, no messages at all.

funerr Over a year ago

Do you have any control over that page? can you allow (or did you try to allow) CORS? did you try using JSONP?

Jose Sabas Over a year ago

I beleive it is possible for me to add CORS (never heard of it before though). And NO I havent try using JSONP, why yo say so, should it work with JSONP?

funerr Over a year ago

@JoseSabas, Client-side code (that isn't originating from the same host) can't just request every page it desires if not allowed by the page/host. To overcome this situation you can use CORS (allow external JavaScript to access your page) or JSONP which does a neat trick in order to achieve the same result. If you are running the script externally (e.g. from a different host) and you want it to access that page, use one of those techniques.

Jose Sabas Over a year ago

All right @agam360 perfect, thanks. I'll try to make my way with JSONP. Anny suggestions to achieve that neat trick ?, lol

|

Collectives™ on Stack Overflow

Obtain JSON response from URL with AJAX using Javascript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related