title: Get JSON response at javascript
body: <p>I'm answering a certain request to my Django server with a JSON object:</p>
  
  <pre><code>return HttpResponse(json.dumps(geojson), mimetype="application/json")
  </code></pre>
  
  <p>But I don't know how to get it at the HTML/javascript. I have gone through lots of similar questions and tutorials, but they all start defining an string variable with an example of JSON to use it. But I haven't been able to find how to get the JSON the server is answering me.</p>
  
  <p>Any help or tutorial link?</p>
  
  <p>EDIT: I tried using jQuery.ajax as suggested, but the function is never being executed:</p>
  
  <p>Content of map-config.js:</p>
  
  <pre><code>var jsondata;
  var lon = 5;
  var lat = 40;
  var zoom = 5;
  var map, layer;
  
  function init(){
      map = new OpenLayers.Map( 'map' );
      layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
              "http://vmap0.tiles.osgeo.org/wms/vmap0",
              {layers: 'basic'} );
      map.addLayer(layer);
      map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  
      var geojson_format = new OpenLayers.Format.GeoJSON();
      var vector_layer = new OpenLayers.Layer.Vector(); 
      map.addLayer(vector_layer);
      vector_layer.addFeatures(geojson_format.read(jsondata)); // Feeding with the json directly
  }
  
  $.ajax({
    url: "localhost:8000/form/",
    type: "POST",
    dataType: "json"
  }).done(function (data) {
    $("#dialog").dialog('Hello POST!');
    console.log(data);
    jsondata = data; // Saving JSON at a variable so it can be used with the map
  });
  </code></pre>
  
  <p>I also have another js file for a form, which works properly. And the HTML file is this one:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;  
      &lt;script src="{{STATIC_URL}}js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"&gt;&lt;/script&gt;
      &lt;script src="{{STATIC_URL}}js/OpenLayers.js"&gt;&lt;/script&gt;
      &lt;script src="{{STATIC_URL}}js/form.js"&gt;&lt;/script&gt;
      &lt;script src="{{STATIC_URL}}js/map-config.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css"&gt;
      &lt;link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body onload="init()"&gt;
      &lt;div id="form" class="form-style"&gt;
          &lt;p&gt;Start Date: &lt;input type="text" id="id_startDate"&gt;&lt;/p&gt;
          &lt;p&gt;
              &lt;label for="amount"&gt;Interval:&lt;/label&gt;
              &lt;input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /&gt;
          &lt;/p&gt;
          &lt;p&gt; &lt;div id="id_interval"&gt;&lt;/div&gt; &lt;/p&gt;
  
          &lt;p&gt;
            &lt;button id="id_okButton"&gt;OK&lt;/button&gt;
          &lt;/p&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="map" class="smallmap"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>So, when the POST request is received with the json coming from server, the jQuery.ajax method should execute, and the map should show some data (draw polygons over it to be exact). That POST is arraiving OK as stated at FireBug (the snapshot is not showing the whole json object, which is big):</p>
  
  <p><img src="https://i.stack.imgur.com/ZaxuI.png" alt="JSON response snapshot at FireBug"></p>