1

把我的头发拉在这里。

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...

}

}); });
4

2 回答 2

0

行，

您可能希望将 json 处理代码与 ajax success() 函数分离。相反，对数据进行排序并将其存储在全局变量中。一旦收到所有数据（检查），您可以调用一个函数来绘制您的 SVG，从而控制时间。它就像 jquery 的 $.document(ready)

编辑：

根据您的场景，您需要一个更高效的 json 文件队列系统。一种方法是分块而不是随机加载 json 文件。您提到每 10 分钟创建一个新文件，因此获取第一个 json 文件并获取，比如说，另外 35 个 json 文件，实际上获取了 6 小时的数据。如果一个文件夹当前的文件少于 36 个，您可以选择等到所有 36 个文件都存在，然后运行 ​​svg 代码并继续或等待下一个 36 个 json 文件。这带来了对时间的控制，其中一个 svg 文件代表 6 小时的数据。您也可以从 36 更改为任何合理的值

于 2012-04-13T14:21:25.873 回答
0

在这里找到了一个很棒的解决方案，我做了如下调整。完美运行。感谢您对此的投入。

        function getFiles(){

        $.ajax({
            url: './php/getfiles.php',
            type : 'POST',
            dataType: 'json',
            success: function (files){

                for (_a in files.response){
                    for (_b in files.response[_a]){
                        var fname = files.response[_a][_b].substr(30, 8);
                        jsonVals[fname] = files.response[_a][_b];
                    }       
                }

                getData();

            },

            error: function (files){
                console.log(files.message);
            },

        });

    }


    function getData(){

        _d = 0;

        function fireRequest(jsonURL) {
                return $.ajax({
                    type: "GET",
                    url: jsonURL,
                    dataType: 'json',
                    success: function(data){
                        console.log("got " + jsonURL);
                        if (_d == Object.size(jsonVals)){ console.log('done'); }


                    }
                });
        }

        var countries=["US","CA","MX"], startingpoint=$.Deferred();
        startingpoint.resolve();

        $.each(jsonVals,function(key, file) {
            startingpoint=startingpoint.pipe( function() {
                    console.log("making requst for " + file);
                    _d = _d + 1;
                    return fireRequest(file);
            });
        });


    }
于 2012-04-14T14:04:52.740 回答