76

我正在尝试使用 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]了“未定义”。

任何（更多）提示如何解决这个问题？

4

7 回答 7

185

Since the settings object is tied to that ajax call, you can simply add in the indexer as a custom property, 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);       
};

Edit: Adding in an updated JSFiddle example, as they seem to have changed how their ECHO endpoints work: https://jsfiddle.net/djujx97n/26/.

To understand how this works see the "context" field on the ajaxSettings object: http://api.jquery.com/jquery.ajax/, specifically this note:

"The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves."

于 2013-12-04T19:25:52.057 回答
13

您还可以使用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);
});
于 2016-05-24T06:49:35.090 回答
8

尝试这样的事情（使用 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){
    }
});

取自这里

于 2013-08-24T01:28:19.680 回答
7

你不能像这样传递参数——成功对象映射到一个带有一个参数的匿名函数，这就是接收到的数据。在 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)
}
于 2013-08-24T01:29:38.030 回答
4

我是这样做的：

    function f(data,d){
    console.log(d);
    console.log(data);
}
$.ajax({
    url:u,
    success:function(data){ f(data,d);  }
});
于 2016-09-24T11:54:31.743 回答
0

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

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

为加载函数制作变量，但我应该使用：

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

没有$( )

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

于 2013-11-27T01:19:18.893 回答
0

我最近遇到了问题。当文件名长度超过 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");
于 2015-09-05T10:00:39.997 回答