在jQuery中用web api ajax调用填充数组

Fill array with web api ajax call in jQuery

本文关键字：调用填充数组 ajax api jQuery 中用 web 更新时间：2023-09-26

我对jQuery或Javascript有问题。我正在尝试从一个IP阵列在谷歌地图中显示更多的标志。我设法将IP数组传递给了函数，但当我用ajax调用与数组长度一样多的web api时，我遇到了一个问题，结果locations数组为空（未定义）；

这是我的代码

function initialize(ipList)
{
    var locations = [];
    var ips = ipList;
    var apiUrl = 'http://freegeoip.net/json/';

//    for(var i = 0; i < ips.length; i++)
//    {
//        jQuery.ajax
//        ({ 
//            url: apiUrl + ips[i], 
//            type: 'POST', 
//            dataType: 'jsonp',
//            success: function(location) 
//            {
//                if(location != null)
//                {
//                    locations.push(location);;
//                }
//            }
//        });
//    }
    $.each(ips, function(i, x) 
    {
        $.ajax
        ({
            url: apiUrl + x,
            type: "POST",
            cache: false,
            success: function(data) 
            {
                if(data != null)
                {
                    locations[i] = location;
                }
            }
        });
    });
    var properties = 
    {
        center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),properties);
    for (var i = 0; i < locations.length; i++)
    {
        var marker = new google.maps.Marker
        ({
            position:{lat: locations[i].latitude, lng: locations[i].longitude},
            animation:google.maps.Animation.BOUNCE,
            title: locations[i].city
        });
        marker.setMap(map);
    }
}

你是说要吗

locations[i] = location;

而不是

locations[i] = data;

您可能有上下文、范围的问题。使用回调时，回调函数无法查看初始化调用创建的值。最快的解决方案是在of初始化之外定义位置。

这是完全未经测试的，但还有更多内容。我把map设为全局变量。

          var map = null;
            function initialize(ipList) {
                var ips = ipList;
                var apiUrl = 'http://freegeoip.net/json/';
                $.each(ips, function (i, x) {
                    $.ajax
                    ({
                        url: apiUrl + x,
                        type: "POST",
                        cache: false,
                        success: function (data) {
                            if (data != null) {
                                porcessPoint(data);
                            }
                        }
                    });
                });
            }
            function processPoint(datapoint) {
                // assuming the first point is used to create the map
                if (!map) {
                    var properties =
                    {
                        center: new google.maps.LatLng(datapoint.latitude, datapoint.longitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map"), properties);
                }
                var marker = new google.maps.Marker
                ({
                    position: { lat: datapoint.latitude, lng: datapoint.longitude },
                    animation: google.maps.Animation.BOUNCE,
                    title: datapoint.city
                });
                 marker.setMap(map);
            }

我希望这对某人有用。这就是我如何更改整个代码：

$(function() 
{   
    $('#details').hide();
    $("#btnSubmit").click(function()
    {
        var ipInput = $("#ipInput").val();
        $.ajax
        ({
            type: 'post',
            url: 'http://localhost/LocationFromIP/public_html/php/traceroute.php',
            data: {param:  ipInput},
            success: function(data)
            {
                var ipList = data.match(/'b'd{1,3}'.'d{1,3}'.'d{1,3}'.'d{1,3}'b/g);
                for(var i = 0; i < ipList.length; i++)
                {
                    $('#details').append(ipList[i] + '<br />');
                }
                initialize(ipList);
                $('#details').show();
            },
            error: function (xhr, ajaxOptions, thrownError) 
            {
               alert(xhr.status);
               alert(thrownError);
            }
        });
    }); 
});

function initialize(ipList)
{
    var ips = ipList;
    var apiUrl = 'http://freegeoip.net/json/';
    var map = null;
    $.each(ips, function(i, x) 
    {
        $.ajax
        ({
            url: apiUrl + x,
            type: "GET",
            cache: false,
            success: function(location) 
            {
                if (i == 0) 
                {
                    var properties = 
                    {
                        center: new google.maps.LatLng(location.latitude, location.longitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map"),properties);
                }
                var marker = new google.maps.Marker 
                ({
                    position:{lat: location.latitude, lng: location.longitude},
                    animation:google.maps.Animation.BOUNCE,
                    title: location.city
                });
                marker.setMap(map);
            }
        });
    });

}