将变量传递给jQuery AJAX成功回调函数

本文介绍了将变量传递给jQuery AJAX成功回调函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图预装载一些图像与jQuery AJAX调用，但我有真正的问题传递（url）字符串到AJAX调用的成功函数（如果这是有道理的）的函数。

这是我的代码如下：

  // preloader对于图库页面上的图像
 window.onload = function（）{
 setTimeout（function（）{
 var urls = [./img/party/];开始
 
 for（var i = 0; i< urls.length; i ++）{
 $ .ajax（{
 url：urls [i]，
 success：function（data，url）{
 $（data）.find（a：contains（.jpg））。each（function（url）{
 new Image（）。src = url + $（this）.attr（href）; 
}）; 
} 
}）; 
}; 
}，1000）; 
};

可以看到我的（失败）尝试将URL传递到 .each（） call - url 结束使用增加整数的值。不知道为什么或者这些相关的，也许是jpg文件的数量？

...无论如何，它当然应该是我原来的urls数组中的单一值。

感谢任何帮助 - 我总是看到这些回调有点扭曲。

PROGESS？

所以，我凑了一下，注意了@ron tornambe和@PiSquared，并且目前在这里：

  //图库页面上的图片预加载器
 window.onload = function （）{
 var urls = [./img/party/\",\"./img/wedding/\",\"./img/wedding/tree/]; 
 
 setTimeout（function（）{
 for（var i = 0; i  $ .ajax（{
 url： urls [i]，
 success：function（data）{
 image_link（data，i）; 
 function image_link（data，i）{
 $ a：contains（.jpg））。each（function（）{
 console.log（i）; 
 new Image（）。src = urls [i] + $（this）.attr （href）; 
}）; 
} 
} 
}）; 
}; 
}，1000）; 
};

我尝试将 image_link（data，i）这里有和无处不在（在每个嵌套函数等），但我得到相同的结果： i 的值只记录为3.我怀疑这是因为对 i 的所有引用指向同一个事物，并且在异步任务实际到达 image_link（data，i） for ... 循环结束并完成（因此具有值3）。不必说，这会给 urls [i] 作为'未定义'。

绕过这？

解决方案

我刚刚遇到类似的问题，相信我已经找到了解决方案。

由于设置对象绑定到ajax调用，您可以简单地将索引器添加为自定义设置，然后您可以使用 this 访问成功回调：

  //图库页面上的图片预加载器
 window.onload = function（）{
 var urls = [./img/party/\",\"./img/wedding/\",\"./img/wedding/tree/]; 
 
 setTimeout（function（）{
 for（var i = 0; i  $ .ajax（{
 url： urls [i]，
 indexValue：i，
 success：function（data）{
 image_link（data，this.indexValue）; 
 
 function image_link i）{
 $（data）.find（a：contains（.jpg））每个（function（）{
 console.log（i）; 
 new Image .src = urls [i] + $（this）.attr（href）; 
}）; 
} 
} 
} 
}，1000）; 
};

希望这样做。

I am trying to preload some images with a jQuery AJAX call, but am having real problems passing a (url) string into a function within the success function of the AJAX call (if that makes sense).

Here is my code as is stands:

//preloader for images on gallery pages
window.onload = function() {
    setTimeout(function() {
        var urls = ["./img/party/"]; //just one to get started

        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data,url) {
                    $(data).find("a:contains(.jpg)").each(function(url) {
                        new Image().src = url + $(this).attr("href");
                    });
                }
            });
        };
    }, 1000);
};

One can see my (failed) attempt at passing the url through into the .each() call - url ends up takes the value of increasing integers. Not sure why or what these relate to, maybe the number of jpg files?

...anyway, it should of course take the single value in my original urls array.

Thanks for any help - I always seem to get in a bit of a twist with these callbacks.

PROGESS?

So, I mucked around a bit, taking heed of comments from @ron tornambe and @PiSquared and am currently here:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data) {
                    image_link(data,i);
                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };
    }, 1000);
};

I tried putting the image_link(data, i) here there and everywhere (in each nested function etc.) but I get the same result: the value for i is only ever logged as 3. I suspect that this is because all references to i point to the same thing and by the time the asynchronous task actually gets to image_link(data, i) the for... loop is over and done with (and hence has a value of 3). Needless to say this gives urls[i] as 'undefined'.

Any (more) tips how I can get round this?

解决方案

I was just experiencing a similar issue, and believe I have found a solution.

Since the settings object is tied to that ajax call, you can simply add in the indexer as a custom setting, which you can then access using this in the success callback:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                indexValue: i,
                success: function(data) {
                    image_link(data , this.indexValue);

                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };
    }, 1000);
};

Hopefully that does the trick.

这篇关于将变量传递给jQuery AJAX成功回调函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！