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

我可以看到我（失败）尝试将网址传递到.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的上下文选项中的对象;如果上下文不是指定，这是对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){
    }
});

取自here

Answer 3

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

Answer 4

您还可以使用 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 5

我这样做：

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

Answer 6

只是为了分享一个类似的问题，以防万一它可以帮助某个人，我正在使用：

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

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

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

没有$( )

不知道为什么，但现在它有效！谢谢，最后我看到这篇文章出了什么问题！

Answer 7

我最近遇到了这个问题。当文件名长度超过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");

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

7 个答案: