通過JavaScript獲取JSON響應

Question

我正在使用JSON對象回答對我的Django服務器的某個請求：

return HttpResponse(json.dumps(geojson), mimetype="application/json")

但是我不知道如何在HTML / javascript中獲得它。 我經歷了很多類似的問題和教程，但是他們都開始定義一個帶有JSON示例的字符串變量來使用它。 但是我還無法找到如何獲取服務器正在回答我的JSON。

有幫助或教程鏈接嗎？

編輯：我嘗試按照建議使用jQuery.ajax，但該函數從未執行過：

map-config.js的內容：

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
});

我還有一個表單的另一個js文件，可以正常工作。 HTML文件就是這樣的：

<html>
<head>  
    <script src="{{STATIC_URL}}js/jquery-1.9.1.js"></script>
    <script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"></script>
    <script src="{{STATIC_URL}}js/OpenLayers.js"></script>
    <script src="{{STATIC_URL}}js/form.js"></script>
    <script src="{{STATIC_URL}}js/map-config.js"></script>
    <link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css">
    <link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css">
</head>

<body onload="init()">
    <div id="form" class="form-style">
        <p>Start Date: <input type="text" id="id_startDate"></p>
        <p>
            <label for="amount">Interval:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <p> <div id="id_interval"></div> </p>

        <p>
          <button id="id_okButton">OK</button>
        </p>
        </p>
    </div>

    <div id="map" class="smallmap">
</body>

因此，當收到來自服務器的json的POST請求時，應執行jQuery.ajax方法，並且地圖應顯示一些數據（准確地在其上繪制多邊形）。 如FireBug所述，該POST可以使OK正常（快照未顯示整個json對象，該對象很大）：

FireBug上的JSON響應快照

Answer 1

您是否將對象序列化為json格式？

    $.ajax({
        url: //your_url,
        type: "POST",
        success: function (data) {
              // write your parsing code..
            }
        },
        error: function (err) {

        }
    });

來自w3schools.com的exp json

{
"people": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

解析exp（在jquery ajax成功函數中）：

$.each(data.people, function (i, person) {
  console.log(person.firstName + " " + person.lastName)
});

Answer 2

您可以在瀏覽器端使用jQuery進行請求。

$.ajax({
  url: "example.com/data",
  dataType: "json"
}).done(function (data) {
  // data is the javascript object from the json response
});

編輯：鏈接到錯誤的jQuery調用。

閱讀詳情

通過JavaScript獲取JSON響應

問題描述

2 個解決方案

解決方案1
1 已采納 2013-06-06 11:20:18

解決方案2
0 2013-06-06 11:22:57

通過JavaScript獲取JSON響應

問題描述

2 個解決方案

解決方案1 1 已采納 2013-06-06 11:20:18

解決方案2 0 2013-06-06 11:22:57

解決方案1
1 已采納 2013-06-06 11:20:18

解決方案2
0 2013-06-06 11:22:57