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

我正在尝试通过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)所有地方（在每个嵌套函数等中）将here和here放置在那里，但得到的结果是相同的：for的值i只记录为3。我怀疑这是因为所有引用都i指向同一个事物并且时间异步任务实际获取到image_link(data, i)的for...循环是完全断绝了（因此具有值为3）。不用说这给出urls[i]了“未定义”。

还有（更多）技巧可以解决这个问题吗？

由于设置对象与该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所有回调中的引用是context选项中设置中传递给$ .ajax的对象；如果未指定context，则是对Ajax设置本身的引用。”

您还可以使用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);
}); 

尝试这样的事情（使用this.url获取url）：

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

从这里取

您不能传递这样的参数-成功对象通过一个参数映射到一个匿名函数，这就是接收到的数据。在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)
}

我这样做是这样的：

    function f(data,d){
    console.log(d);
    console.log(data);
}
$.ajax({
    url:u,
    success:function(data){ f(data,d);  }
});

只是为了分享我遇到的类似问题（如果它可能对某些人有所帮助），我正在使用：

var NextSlidePage = $("bottomcontent" + Slide + ".html");

为load函数创建变量，但是我应该使用：

var NextSlidePage = "bottomcontent" + Slide + ".html";

没有 $( )

不知道为什么，但是现在可以了！谢谢，终于我看到了这篇文章出了什么问题！

我最近遇到了问题。当文件名长度超过20个字符时，问题就来了。因此，绕过是要更改文件名的长度，但技巧也不错。

$.ajaxSetup({async: false}); // passage en mode synchrone
$.ajax({
   url: pathpays,
   success: function(data) {
      //debug(data);
      $(data).find("a:contains(.png),a:contains(.jpg)").each(function() {
         var image = $(this).attr("href");
         // will loop through
         debug("Found a file: " + image);
         text +=  '<img class="arrondie" src="' + pathpays + image + '" />';
      });
      text = text + '</div>';
      //debug(text);
   }
});

经过更多调查后，麻烦来自ajax请求：留意ajax返回的html代码：

<a href="Paris-Palais-de-la-cite%20-%20Copie.jpg">Paris-Palais-de-la-c..&gt;</a>
</td>
<td align="right">2015-09-05 09:50 </td>
<td align="right">4.3K</td>
<td>&nbsp;</td>
</tr>

如您所见，文件名在字符20之后被拆分，因此 $(data).find("a:contains(.png))找不到正确的扩展名。

但是，如果您检查 href参数它将包含文件的全名。

我不知道我是否可以要求Ajax在文本区域中返回完整的文件名？

希望清楚

我找到了收集所有文件的正确测试：

$(data).find("[href$='.jpg'],[href$='.png']").each(function() {  
var image = $(this).attr("href");