Javascript JSON请求在jQuery的每个函数中都不能正常工作

如果包含类

.event

的每个div的值都已更改，我将使用下面的代码检索给定位置的纬度和经度

我遇到的问题是，该代码只会产生两种结果：

• 一个JSON请求返回的值用于每个

  lat

  和

  lon

  变量
• 变量

  lat

  和

  lon

  保持完全相同，就像它们保持不变一样，因此不会替换JSON值

下面是我正在使用的代码：

    $(".button").click(function(){

            data = "";
            $(".event").each(function(){

                original = $(this).find(".address").data("original");
                location = $(this).find(".address").html();
                lat = $(this).find(".lat").html();
                lon = $(this).find(".lon").html();

                if (original !== location) {

                    $.getJSON( "http://nominatim.openstreetmap.org/search?q="+location+"&format=json&polygon=1&addressdetails=1", function(result) {
                        lat = result[0].lat;
                        lon = result[0].lon;
                    });

                }

                data = data + randomNumber() + ": " + lat + " " + lon + ",";

            });

            $(".data").val(data);
            $(".form").submit();

    });

变量

data

将包含包含类

事件的每个div的
lat
和
lon
。除非用户更改了地址，否则这些值将保持不变，此时将通过JSON请求再次检索这些值

然后应提交表格

我怎样才能解决这个问题？谢谢
$。getJSON
是异步的，您不能在回调函数之外引用结果。在所有AJAX请求完成之前，您不想提交表单

$.getJSON（）
返回一个
延迟的
。您可以将所有这些设置为一个数组，并使用
$.when（）
等待它们

$(".button").click(function() {

  var promises = [];
  var data = "";
  $(".event").each(function() {

    var original = $(this).find(".address").data("original");
    var location = $(this).find(".address").html();
    var lat = $(this).find(".lat").html();
    var lon = $(this).find(".lon").html();

    if (original !== location) {
      promises.push($.getJSON("http://nominatim.openstreetmap.org/search?q=" + location + "&format=json&polygon=1&addressdetails=1", function(result) {
        var lat = result[0].lat;
        var lon = result[0].lon;
        data += randomNumber() + ": " + lat + " " + lon + ",";
      }));

    } else {
      data += randomNumber() + ": " + lat + " " + lon + ",";
    }

  });
  $.when.apply($, promises).done(function() {

    $(".data").val(data);
    $(".form").submit();
  });

});

请注意，
data
中值的顺序是不可预测的，因为AJAX请求返回的顺序不一定与发送的顺序相同

您还应该养成使用
var
（或ES6中的
let
）将变量声明为本地变量的习惯。
$。getJSON
是异步的，您不能在回调函数之外引用结果。在所有AJAX请求完成之前，您不想提交表单

$.getJSON（）
返回一个
延迟的
。您可以将所有这些设置为一个数组，并使用
$.when（）
等待它们

$(".button").click(function() {

  var promises = [];
  var data = "";
  $(".event").each(function() {

    var original = $(this).find(".address").data("original");
    var location = $(this).find(".address").html();
    var lat = $(this).find(".lat").html();
    var lon = $(this).find(".lon").html();

    if (original !== location) {
      promises.push($.getJSON("http://nominatim.openstreetmap.org/search?q=" + location + "&format=json&polygon=1&addressdetails=1", function(result) {
        var lat = result[0].lat;
        var lon = result[0].lon;
        data += randomNumber() + ": " + lat + " " + lon + ",";
      }));

    } else {
      data += randomNumber() + ": " + lat + " " + lon + ",";
    }

  });
  $.when.apply($, promises).done(function() {

    $(".data").val(data);
    $(".form").submit();
  });

});

请注意，
data
中值的顺序是不可预测的，因为AJAX请求返回的顺序不一定与发送的顺序相同

您还应该养成使用
var
（或ES6中的
let
）将变量声明为本地变量的习惯。
我认为您应该同时调用
$.getJSON
，然后在获得所有变量的同时处理所有结果

如果位置不需要
$.getJSON
，则可以创建立即解析延迟/承诺来模拟异步调用。这样我们就可以处理相同类型的结果（jquerypromise对象）

以下是代码（非测试）和注释：

$(".button").click(function() {
    // data = "";
    // unnecessary

    // $(".event").each(function() {
    // use map to get promise objects for every ".event"
    var promises = $(".event").map(function() {
        original = $(this).find(".address").data("original");
        location = $(this).find(".address").html();
        // lat = $(this).find(".lat").html();
        // lon = $(this).find(".lon").html();
        // not need here

        if (original !== location) {
            return $.getJSON("http://nominatim.openstreetmap.org/search?q=" + location + "&format=json&polygon=1&addressdetails=1", function(result) {
                lat = result[0].lat;
                lon = result[0].lon;
            });
        } else {
            // make value type same as json, it's a array of { lat, lon }
            return $.Deferred().resolve([{
                lat: $(this).find(".lat").html(),
                lon: $(this).find(".lon").html()
            }]).promise();
        }

        // data = data + randomNumber() + ": " + lat + " " + lon + ",";
        // do it later, after all promise resolved.
    });

    $.when.apply(null, promises)
        .done(function() {
            // convert arguments to a array
            var args = [].slice.apply(arguments);
            data = args
                .map(function(models) {
                    // convert each model to a string
                    var model = models[0];
                    return randomNumber() + ": " + model.lat + " " + lon;
                })
                // join each part with separator ','
                .join(",");

            // while got data, deal with it
            $(".data").val(data);
            $(".form").submit();
        });
});

我认为您应该同时调用
$.getJSON
，然后在获得所有结果的同时处理所有结果

如果位置不需要
$.getJSON
，则可以创建立即解析延迟/承诺来模拟异步调用。这样我们就可以处理相同类型的结果（jquerypromise对象）

以下是代码（非测试）和注释：

$(".button").click(function() {
    // data = "";
    // unnecessary

    // $(".event").each(function() {
    // use map to get promise objects for every ".event"
    var promises = $(".event").map(function() {
        original = $(this).find(".address").data("original");
        location = $(this).find(".address").html();
        // lat = $(this).find(".lat").html();
        // lon = $(this).find(".lon").html();
        // not need here

        if (original !== location) {
            return $.getJSON("http://nominatim.openstreetmap.org/search?q=" + location + "&format=json&polygon=1&addressdetails=1", function(result) {
                lat = result[0].lat;
                lon = result[0].lon;
            });
        } else {
            // make value type same as json, it's a array of { lat, lon }
            return $.Deferred().resolve([{
                lat: $(this).find(".lat").html(),
                lon: $(this).find(".lon").html()
            }]).promise();
        }

        // data = data + randomNumber() + ": " + lat + " " + lon + ",";
        // do it later, after all promise resolved.
    });

    $.when.apply(null, promises)
        .done(function() {
            // convert arguments to a array
            var args = [].slice.apply(arguments);
            data = args
                .map(function(models) {
                    // convert each model to a string
                    var model = models[0];
                    return randomNumber() + ": " + model.lat + " " + lon;
                })
                // join each part with separator ','
                .join(",");

            // while got data, deal with it
            $(".data").val(data);
            $(".form").submit();
        });
});

$.getJSON
是异步的。您正在执行回调函数之前设置
数据。
$。getJSON
是异步的。您正在执行回调函数之前设置
数据
。非常感谢！由于JSON请求已经声明为变量，因此需要在JSON请求下面包含
var lat/lon
？代码有点错误，某些事件有相同的地址，所以我不得不删除它。最好避免在不同的函数之间共享变量，除非你真的需要。AJAX回调函数不需要使用与迭代函数相同的
lat/lon
变量。非常感谢！由于JSON请求已经声明为变量，因此需要在JSON请求下面包含
var lat/lon
？代码有点错误，某些事件有相同的地址，所以我不得不删除它。最好避免在不同的函数之间共享变量，除非你真的需要。AJAX回调函数不需要使用与迭代函数相同的
lat/lon
变量。