传递变量以在jquery AJAX成功回调中起作用

Question

我试图使用jQuery AJAX调用预加载一些图像,但是在将(url)字符串传递给AJAX调用的成功函数中的函数时遇到了实际问题(如果这是有道理的).

这是我的代码:

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

我可以看到我的(失败的)尝试将url传递到.each()调用中 - url最终获取增加整数的值.不知道为什么或这些与什么有关,也许是jpg文件的数量？

...无论如何,它当然应该采用我的原始urls数组中的单个值.

感谢您的帮助 - 我似乎总是对这些回调产生一些影响.

---

陆侃？

所以,我喋喋不休地听了@ron tornambe和@PiSquared的评论,目前我在这里:

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

我试着把它放在image_link(data, i)那里和每个地方(在每个嵌套函数等)但我得到相同的结果:值i只被记录为3.我怀疑这是因为所有引用i指向相同的东西,并由时间异步任务实际获取到image_link(data, i)的for...循环是完全断绝了(因此具有值为3).不用说,这给出urls[i]了"未定义".

任何(更多)提示如何绕过这个？

Answer 1

由于设置对象与该ajax调用绑定,您只需将索引器添加为自定义属性,然后可以this在成功回调中使用该属性:

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

编辑:添加一个更新的JSFiddle示例,因为它们似乎已经改变了他们的ECHO端点的工作方式:https://jsfiddle.net/djujx97n/26/ .

要了解其工作原理,请参阅ajaxSettings对象上的"context"字段:http://api.jquery.com/jquery.ajax/ ,特别是本说明:

" this所有回调中的引用是在设置中传递给$ .ajax的上下文选项中的对象;如果未指定context,则这是对Ajax设置本身的引用."

Answer 2

尝试这样的事情(使用this.url获取网址):

$.ajax({
    url: 'http://www.example.org',
    data: {'a':1,'b':2,'c':3},
    dataType: 'xml',
    complete : function(){
        alert(this.url)
    },
    success: function(xml){
    }
});

取自这里

Answer 3

您还可以使用indexValue属性通过对象传递多个参数:

var someData = "hello";

jQuery.ajax({
    url: "http://maps.google.com/maps/api/js?v=3",
    indexValue: {param1:someData, param2:"Other data 2", param3: "Other data 3"},
    dataType: "script"
}).done(function() {
    console.log(this.indexValue.param1);
    console.log(this.indexValue.param2);
    console.log(this.indexValue.param3);
}); 

Answer 4

您不能传递这样的参数 - 成功对象映射到具有一个参数的匿名函数,这是接收到的数据.在for循环之外创建一个函数,该函数(data, i)作为参数并在那里执行代码:

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