0

我正在使用 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 正常(快照未显示整个 json 对象,它很大):

FireBug 的 JSON 响应快照

4

2 回答 2

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)
});
于 2013-06-06T11:20:18.870 回答
0

您可以在浏览器端使用 jQuery 进行请求。

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

编辑:链接到错误的 jQuery 调用。

阅读详情

于 2013-06-06T11:22:57.583 回答