把我的头发拉在这里。
Jquery、多个 JSON 文件和 Ajax
我有一个 python 脚本,它正在收集数据并将 JSON 文件转储到我的网络服务器上的文件夹中
我正在尝试可视化该数据。
基本上,我首先绘制一个 SVG 地图并用一个虚拟 json 文件对其进行着色。随后,我想使用 JSON 数据对其进行着色。每个 JSON 文件将代表地图的一个完整渲染(着色)。
我正在使用 Ajax 调用来返回目录中的文件的 php 脚本。然后我想使用 Ajax(或简写 .getJson)来加载该文件中的数据 - 为地图着色,然后继续下一个(最终结果是动画)。问题在于 AJAX 的异步特性,并且无法控制 Ajax 位的及时执行和完成。显然我不想进行同步调用,因为我不想锁定浏览器。
这是我的代码(道歉 - 它相当大)
jQuery(document).ready(function() {
$(function() {
var map, c = [];
var dep_data;
var val = {};
var max= 0;
var vals = new Array();
c = $('#map');
c.height(c.width()*.5);
drawMap('mapData.json');
function drawMap(url){
console.log(url);
$.ajax({
url: 'mapData.json',
dataType: 'json',
success: function(data) {
dep_data = data;
map = window.m = $K.map('#map', 600, 800);
map.loadMap('ireland.svg', function() {
map.loadStyles('./mapping_files/style.css');
map.addLayer({
id: 'regions',
key: 'name-1'
});
colourMap(dep_data);
var mapData = $.ajax({
url: './php/getfiles.php',
type : 'POST',
dataType: 'json',
success: function (files){
for (_a in files.response){
for (_b in files.response[_a]){
$.ajax({
url: files.response[_a][_b],
dataType: 'json',
success: function (json){
colourMap(json);
$(this).dequeue();
}
});
}
}
},
error: function (files){
console.log(files.message);
},
});
});
}
});
}
colourMap = function(data) {
//do the coloring in...
}
}); });