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

Question

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

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

我在同一个views.py文件上还有另一个函数处理一个ajax请求，该请求执行一些计算并返回新的坐标，该坐标应该更新{{lat_long}}标记所在的同一位置。

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

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

Answer 1

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

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

您的 View 将执行以下操作:

1. 从模型中获取纬度/经度值
2. Convert to JSON format
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>