django+javascript - 如何处理来自不同来源/函数的数据？

Question

我有一个 JavaScript 地图，当模板页面首次加载时，它从 django 视图/函数获取一些坐标，如下所示

<script type="text/javascript">    
...
map.setCenter(new f.LatLng{{lat_long}}, 11);
...
</script>

：应该更新 {{lat_long}} 标签所在的同一位置。

因此，在某种程度上，我应该使页面首次加载时来自函数的 {{lat_long}} 消失，并将其替换为来自处理 ajax 请求的函数的新 {{lat_long}} 。

解决这个问题的最佳方法是什么，以便两个函数都可以在上面的 JavaScript 代码中更新相同的纬度/经度？真实的例子将受到真正的赞赏。

Answer 1

克里斯说的是正确的。您想要动态更新服务器的值。将代码放在现在的位置只是在页面加载时执行，您需要使用 AJAX 请求不断向服务器询问最新值。

您需要做的是创建另一个仅返回纬度和经度的 Django 视图，JSON 是最简单的方法（即采用 {"latitude": 12.2, "longitude": 11.1} 的形式）。

您的视图将执行以下操作：

1. 从模型获取纬度/经度值
2. 转换为JSON 格式
3. 使用 render_to_response 或其他方式返回 HTTPResponse 对象

在客户端，以下是使用 jQuery Javascript 库执行 AJAX 请求的示例：

<script type="text/javascript">


//Run When page first loads
map.setCenter(new f.LatLng{{lat_long}}, 11);


var updateLatLng = function () {
    $.ajax({
       type: "GET",
       url: "/url/to/latlng/view",
       data: "mapID=7", //Whatever extra parameters you need will go here
       success: function(data) {
         //This is run when we get data back from the server,
         //If you send back the data in JSON format
         //Then you can access the data using "data.latitude" and "data.longitude"
         map.setCenter(new f.LatLng(data.latitude, data.longitude});
       }
     });
};

//Call updateLatLng every two seconds
window.setInterval(updateLatLng , 2000);

</script>

Answer 2

您在这里处理不同的时间点。

1. Django 渲染模板，计算 lat_long 并将其输入。
2. 渲染的页面发送到客户端。
3. 浏览器加载页面和单个内容资源，包括 AJAX 脚本。
4. AJAX 最终运行，从服务器获取新的 lat_long 并将其返回给客户端。
5. AJAX 请求的成功函数接收数据并对其执行某些操作。

关键是，在 AJAX 请求返回新值之前，页面脚本早已设置了该值。他们在这里并没有真正的竞争。如果您想根据 lat_long 的新值更改地图中心，只需在 AJAX 成功方法中使用新值调用 map.setCenter 即可。