Read and Parse Django Simplejson HttpResponse JQuery

Question

I have Django returning an HttpResponse of JSON type which looks like:

{"lat": "41.1391666667", "alt": " 367401.6875", "lon": " 113.945472222"}

The return statement from Django views.py method looks like:

return HttpResponse( simplejson.dumps( {'lat' : lat , 'alt' : alt , 'lon' : lon} ) , content_type='application/json')

I am attempting to read the Json using JQuery with the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function(){

        // The JSON (simplejson) Django repsonse looks like:
        // {"lat": "23.5017777778", "alt": " 371405.03125", "lon": " 92.0223333333"}

        document.write('Getting JSON response...');

        $.getJSON(< my django url>,
            function(data) {
            alert(data['alt']);
            });
    });

</script>

</head>


<body>
</body>
</html>

I'm very new to Javascript / JQuery and have tried solutions from many other posts here but cannot seem to get any response running my JQuery code above ( I don't see any alert button with my altitude displayed). I've verfified the JSON response from Django looks fine. I would really appreciate some help on what I'm doing wrong here. Thanks alot.

Are you getting a JS error? Can you tell (from FireBug or Chrome Dev Tools) that any request is being made to django? If so, is the response what you would expect? Try console.log(data) within your callback function, and see what that says. One thing that is important to note is that if the backend throws any kind of error, the callback function won't be triggered - this often trips up newcomers to jQuery ajax. — Jake Feasel, Nov 14 '11 at 00:49
Thanks for the response - with FireBug I can see that a request is being made. Under Profile I can see "GET http:// 200 OK 97ms. There is also information about the Response Headers including Content-Type application/json. But the Response tab in FireBug is empty? If I go to the URL myself it returns a well-formatted JSON response. Any other ideas? Thanks — PhilBot, Nov 14 '11 at 01:25
Interesting, in Google Chrome Dev tools I get the error 'XMLHttpRequest cannot load http://. Origin http:// is not allowed by Access-Control-Allow-Origin.' — PhilBot, Nov 14 '11 at 01:45
Response tab is empty? That sounds like your problem, right there. Something must be up between how your request is being made when you access it directly vs. how it is being made with ajax. Are you sure you're passing the same parameters in? — Jake Feasel, Nov 14 '11 at 01:48
Your problem is the same as this: http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains — Jake Feasel, Nov 14 '11 at 01:50
Thanks - I moved it to the webserver and it works. I was opening the html file locally with Chrome and got that error but now the popup works as I moved it to the live server. — PhilBot, Nov 14 '11 at 01:54

Alvin K. · Answer 1 · 2011-11-14T01:10:53.447

0

Use data.alt instead. Start with alert(data) to ensure data is reaching you. I have a sample code that uses $.getJSON() plus a bit of basic jquery code to get you started.

Also, current jquery is http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js (note: my code is one version behind).

edited Nov 14 '11 at 01:10

answered Nov 14 '11 at 00:55

Alvin K.

4,099
17
25

Thanks for the response - I've tried both data.alt and alert(data) but still receive no pop-ups with my data. I've updated to the latest jquery you included in your response. Firebug says the request is being made to my URL but I'm not receiving a response, just the header info. – PhilBot Nov 14 '11 at 01:27

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

This is solved - the problem was with opening the file locally with Chrome as related to this question: Access-Control-Allow-Origin Multiple Origin Domains?. Moving the file to the external server allowed it to work as desired. Thanks for the help.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 14 '11 at 12:59

PhilBot

1,344
17
70
143

Read and Parse Django Simplejson HttpResponse JQuery

2 Answers2