循环中的jQuery Ajax调用丢失本地变量引用

Question

我正在循环中进行多个jQuery ajax调用。每次ajax调用返回时，我需要引用与原始ajax调用相对应的值。我的当前代码无法正常工作，因为lskey变量的值已经被进一步的循环迭代所改变。

以下是代码:

for (var i = 0, len = localStorage.length; i < len; i++) {
        var lskey = localStorage.key(i);
        if (lskey.substr(0, 4) === 'form') {
            var postdata = localStorage.getItem(lskey); // Get the form data
            $.ajax({
                type: "POST",
                async: "false",
                url: "/Profile/PostForm",
                data: postdata,
                success: function (data) {
                    $('#rollinginfo').append('<br>' + data + ',key=' + lskey);
                    localStorage.removeItem(lskey); // Remove the relevant localStorage entry
                }
            , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); }
            });


        }
    } 

问题在于每次循环执行时，lskey都会被更改，因此成功回调函数没有对调用时存在的lskey值的引用。

如何为每个成功回调引用正确的lskey值？

- Journeyman

Answer 1

for (var i = 0, len = localStorage.length; i < len; i++) {
    var lskey = localStorage.key(i);
    if (lskey.substr(0, 4) === 'form') {
        var postdata = localStorage.getItem(lskey); // Get the form data
        $.ajax({
            type: "POST",
            async: "false",
            url: "/Profile/PostForm",
            data: postdata,
            local_lskey: lskey
            success: function (data) {
                $('#rollinginfo').append('<br>' + data + ',key=' + lskey);
                localStorage.removeItem(this.local_lskey); // Remove the relevant localStorage entry
            }
        , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); }
        });
    }
}

这应该可以正常工作。

- Jack

---

我在谷歌上写了一个可疑的奇怪的搜索查询，咔嚓！第一个结果就是你的答案，非常感谢！而且SO（Stack Overflow）很牛！ - NaturalBornCamper

Answer 2

最后，我将关键信息添加到服务器发布中，并以JSON格式从服务器返回，因此成功函数可以简单地引用包含在服务器响应中的密钥。

- Journeyman

Answer 3

你考虑过使用链式 AJAX 调用吗？基本上你可以发起一次 AJAX 调用，处理结果并修改 lskey 等内容。然后在准备好之后，递增 i 并发出第二个 AJAX 调用。以此方式循环，而不是使用 for 循环...

- Justin Ethier

---

谢谢。我猜我可以那样做，但是想知道是否有一种方法将值“传递”到成功函数中。 - Journeyman

Answer 4

你可以将ajax调用放入自己的函数中，并传递lskey和postData值。这样，localStorage.removeItem(lskey)将引用函数上下文中的lskey变量，而不是循环上下文中的变量。 示例 声明函数 -

function postForm(postdata, lskey) {
  $.ajax({
    type: "POST",
    async: "false",
    url: "/Profile/PostForm",
    data: postdata,
    success: function(data) {
      $('#rollinginfo').append('<br>' + data + ',key=' + lskey);
      localStorage.removeItem(lskey); // Remove the relevant localStorage entry
    },
    error: function(data) {
      $('#rollinginfo').append('<br />ERR:' + data);
    }
  });
}

然后你可以从循环中调用你的函数 -

for (var i = 0, len = localStorage.length; i < len; i++) {
  var lskey = localStorage.key(i);
  if (lskey.substr(0, 4) === 'form') {
    var postdata = localStorage.getItem(lskey); // Get the form data
    postForm(postdata, lskey);
  }
}

你也可以在循环之前声明函数（将其分配给变量），然后在循环内调用它。

var postForm = function(postdata, lskey) {
  $.ajax({
    type: "POST",
    async: "false",
    url: "/Profile/PostForm",
    data: postdata,
    success: function(data) {
      $('#rollinginfo').append('<br>' + data + ',key=' + lskey);
      localStorage.removeItem(lskey); // Remove the relevant localStorage entry
    },
    error: function(data) {
      $('#rollinginfo').append('<br />ERR:' + data);
    }
  });
}
for (var i = 0, len = localStorage.length; i < len; i++) {
  var lskey = localStorage.key(i);
  if (lskey.substr(0, 4) === 'form') {
    var postdata = localStorage.getItem(lskey); // Get the form data
    postForm(postdata, lskey);
  }
}

- John C

---

@MattPowell 公平的要求 - 已添加示例。 - John C