jQuery Llamada en Ajax perdiendo la referencia de variable local

Question

Estoy haciendo varias llamadas jQuery ajax dentro de un bucle. Cada vez que regresa una de las llamadas ajax, necesito hacer referencia a un valor correspondiente a la llamada ajax original. Mi código actual no funciona correctamente, ya que el valor de la variable lskey ha sido alterado por iteraciones de bucle adicionales.

Aquí está el código:

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


     } 
    } 

El problema es que lskey está siendo alterado cada vez que se ejecuta el bucle, y por lo tanto la devolución de llamada de éxito no tiene una referencia al valor de lskey que existía en el momento de la llamada.

¿Cómo hago referencia al valor correcto de lskey para cada devolución de llamada exitosa?

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

Esto debería funcionar.

Answer 2

¿Has considerado encadenar las llamadas AJAX? Básicamente puede hacer una llamada AJAX, procesar el resultado, modificar lskey, etc. Luego, cuando esté listo, incremente i y emita la segunda llamada AJAX. Bucle de esta manera en lugar de usar el bucle for ...

Answer 3

Al final agregué la información clave a la publicación del servidor, y luego la devolví del servidor en formato JSON para que la función de éxito pudiera simplemente referirse a la clave contenido en la respuesta del servidor.

Answer 4

Se puede poner su llamada Ajax en su propia función y pasar los lskey y postData valores. De esa manera localStorage.removeItem(lskey) se referirá a la variable lskey en el contexto de la función más que el contexto del bucle.

Ejemplo

declarar la función -

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

A continuación, puede llamar a su función a partir de su bucle -

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

También puede declarar la función justo antes del bucle (asignándolo a una variable) y luego llamarlo dentro del ciclo.

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