jQuery Połączenie Ajax w pętli utraty lokalnej zmiennej referencyjnej

Question

Wykonuję kilka wywołań ajax jQuery w pętli. Za każdym razem, gdy jeden z wywołań ajax zwraca, muszę odwołać się do wartości odpowiadającej oryginalnemu wywołaniu ajax. Mój obecny kod nie działa poprawnie, ponieważ wartość zmiennej lskey została zmieniona przez kolejne iteracje pętli.

Oto kod:

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); } 
      }); 


     } 
    } 

Problemem jest to, że lskey jest zmieniany za każdym razem, gdy pętla wykonuje, a zatem zwrotna sukces nie mają odniesienia do wartości lskey, które istniały w chwili połączenia.

Jak mogę podać prawidłową wartość lskey dla każdego oddzwonienia sukcesu?

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); } 
     }); 
    } 
} 

To powinno zadziałać.

Answer 2

Czy zastanawiałeś się nad łańcuchem połączeń AJAX? Zasadniczo można wykonać jedno wywołanie AJAX, przetworzyć wynik, zmodyfikować lskey itd. Następnie, gdy jesteś gotowy, zwiększ i i wydaj drugie wywołanie AJAX. Pętla w ten sposób zamiast używać pętli for ...

Answer 3

Na koniec dodałem informacje o kluczach do serwera, a następnie zwróciłem je z serwera w formacie JSON, aby funkcja sukcesu mogła po prostu odnosić się do klucza zawarte w odpowiedzi serwera.

Answer 4

Można umieścić wywołanie ajax do własnej funkcji i przekazać wartości lskey i postData w. W ten sposób localStorage.removeItem(lskey) będzie odnosić się do zmiennej lskey w kontekście funkcji zamiast kontekście pętli.

Przykład

stwierdzenie funkcję -

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); 
    } 
    }); 
} 

Następnie można wywołać swoją funkcję z pętli -

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); 
    } 
} 

Można również zadeklarować funkcję tuż przed pętlą (przypisanie jej do zmiennej), a następnie wywołanie go w pętli.

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); 
    } 
}