JS / AJAX / JSON

JS / AJAX / JSON

本文关键字：JSON AJAX JS      更新时间：2023-09-26

我是JS/AJAX和JSON解析的新手。我已经试着调试这个代码片段一段时间了，但我似乎不能弄清楚。

我试图将值附加到动态div，但AJAX请求内的$("#"+ id)始终具有for循环内id的最后一个值。它不会在每次for循环增加到div id的下一个值时追加它。

有谁知道怎么回事吗?还是AJAX请求是这样的?

最后的var myID是用来调试的。myID可以很好地获取id的值，但是AJAX请求似乎直到for循环的最后一个值运行时才执行。

如有任何帮助，不胜感激。

    for (var x = 0; x < days.length; x++) {
            var y = days[x];
            var id = location + "_day_" + y;
            $("#" + location).append("<div id='" + id + "'><h2>Day #" + y + "</h2></div>");
            $.ajax
            ({
                type: "GET",
                url: jsonFile,
                dataType: "json",
                success: function(json) {
                    for (var i = 0; i < json.trips.length; i++) {
                        var name = json.trips[i].name;
                        var cost = json.trips[i].cost;
                        radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>";
                        $("#" + id).append(radioButton);
                    }
                }
            });
            var myID = id;
    }

这是因为Ajax回调直到稍后才被调用(在请求完成之后)，到那时id的值将是循环中的最后一个值。你需要使用闭包来解决这个问题:

{
   type: "GET",
   url: jsonFile,
   dataType: "json",
   success: (function(id){
            return function(json) {
                for (var i = 0; i < json.trips.length; i++) {
                    var name = json.trips[i].name;
                    var cost = json.trips[i].cost;
                    radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>";
                    $("#" + id).append(radioButton);
                }
            };
        })(id)
}

现在函数将id作为一个局部变量传递，而不是在外部作用域中使用自创建该函数以来已经更改的变量。

为了帮助你理解，这里有一个例子来说明发生在你身上的事情:http://jsfiddle.net/qXCKZ/注意id的新值是如何被提醒的。

下面是通过使用闭包创建变量的本地副本的解决方案:http://jsfiddle.net/DAwNz/

您是否尝试过将for循环的内容移动到一个单独的函数中?我认为这里存在闭包绑定问题，尽管期望id与调用ajax函数时的值相同。将所有内容移动到一个单独的函数中会将id变量绑定到函数的作用域。

Ajax请求是异步的，这意味着该请求是在您创建$时启动的。Ajax调用，但它继续遍历代码，而不是等待响应。for循环非常快，所以当ajax请求返回时，for循环已经完成了。此外，由于ID变量是包含函数的局部变量，因此在调用成功函数之前不会使用它。

要解决这个问题，可以使用闭包。这将允许您在进行ajax调用时传递ID变量的值。

例如:

$.ajax({
  ...
  success: (function (id) {
      return function(json) {
        ...
      }
    }(id));
});

将(id)放在该函数的末尾，在代码被处理后立即执行该函数，并使id成为该上下文的局部变量。然后，它返回您最初尝试定义的回调函数。

希望有帮助。:)

如果他只是将async: false属性添加到调用中。

相关文章：