Question

我有一个Handler，里面有一些数据，如下所示：

   {"city1": { "name": "Adana","slug": "north-east", "url": "#", "path": "M 156.53125,407.40625 L 156.71875,408.5625 L 157.1875,407.8125 L 156.53125,407.40625 z"}}

P.S：路径来自SVG图像。它画了一个城市边界，有很多城市。

我尝试将此处理程序中的数据转换为变量以便稍后使用...

CODE：

  <script type="text/javascript">
     var paths;

        $.ajax({
            url: '/paths.ashx',
            dataType: 'json',
            contentType: 'application/json',
            responseType: "json",
            success: function (data) {
                paths = data;
                alert(paths);
            },
            error: function (data, status, jqXHR) {
                alert(status);
            }

        });

 jQuery(function ($) {

        var c = Raphael('map', "100%", "100%");
        c.safari();
        var label = c.popup(0, 0, "").hide();
        attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
        arr = new Array();
        for (var item in paths) {
            var p = c.path(paths[item].path);
            arr[p.id] = item;
            p.attr(attr);
            p.hover(function () {
                this.animate({
                    fill: '#8fbf27'
                }, 200);
                bbox = this.getBBox();
                label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
            }, function () {
                this.animate({
                    fill: attr.fill
                }, 200);
                label.hide();
            })
            .click(function () {
                location.href = paths[arr[this.id]].url;
            })
        }
    });
  </script>

问题就在这里......路径或数据未定义，它总是空的。但是paths.ashx根本不是空的......

我找不到解决方案......你能不能看看......

Answer 1

将jQuery .ajax()函数放在jQuery DOM ready函数和AJAX调用的success处理程序内的绘图逻辑中，如下所示：

<script type="text/javascript">
    var paths;

    jQuery(function ($) {
        $.ajax({
            url: '/paths.ashx',
            dataType: 'json',
            contentType: 'application/json',
            responseType: "json",
            success: function (data) {
                paths = data;
                alert(paths);
                var c = Raphael('map', "100%", "100%");
                c.safari();
                var label = c.popup(0, 0, "").hide();
                attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
                arr = new Array();
                for (var item in paths) {
                    var p = c.path(paths[item].path);
                    arr[p.id] = item;
                    p.attr(attr);
                    p.hover(function () {
                    this.animate({
                        fill: '#8fbf27'
                    }, 200);
                    bbox = this.getBBox();
                    label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
        }, function () {
            this.animate({
                fill: attr.fill
            }, 200);
            label.hide();
        })
        .click(function () {
            location.href = paths[arr[this.id]].url;
        })
    }
        },
        error: function (data, status, jqXHR) {
            alert(status);
        }
    });
});

Answer 2

你想在ajax承诺完全填满之前画画，试试这个

function drawMap (paths) {
    var c = Raphael('map', "100%", "100%");
    c.safari();
    var label = c.popup(0, 0, "").hide();
    attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
    arr = new Array();
    for (var item in paths) {
        var p = c.path(paths[item].path);
        arr[p.id] = item;
        p.attr(attr);
        p.hover(function () {
            this.animate({
                fill: '#8fbf27'
            }, 200);
            bbox = this.getBBox();
            label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
        }, function () {
            this.animate({
                fill: attr.fill
            }, 200);
            label.hide();
        })
        .click(function () {
            location.href = paths[arr[this.id]].url;
        })
    }
}

并从你的ajax请求中

$.ajax({
    url: '/paths.ashx',
    dataType: 'json',
    contentType: 'application/json',
    responseType: "json",
    success: function (data) {
        paths = data;
        drawMap(paths); //notice this
    },
    error: function (data, status, jqXHR) {
        alert(status);
    }
});

Ajax Json的通用处理程序数据

2 个答案: