Передать переменную функции в 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) здесь и везде (в каждой вложенной функции и т.д.), но я получаю тот же результат: значение для i регистрируется только как 3. Я подозреваю, что это потому, что все ссылки до i указывают на одно и то же, и к тому времени, когда асинхронная задача фактически попадает в image_link(data, i), цикл for... завершен и завершен (и, следовательно, имеет значение 3). Излишне говорить, что это дает urls[i] как "undefined".

Любые (более) советы, как я могу обойти это?

Ответы

Ответ 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);       
};

Надеюсь, что это трюк.

Ответ 2

Попробуйте что-то вроде этого (используйте 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){
    }
});

Взято из здесь

Ответ 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)
}

Ответ 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);
});

Ответ 5

Я делаю так:

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

Ответ 6

Просто для того, чтобы поделиться аналогичной проблемой, которую я имел, если это может помочь кому-то, я использовал:

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

чтобы сделать переменную для функции загрузки, Но я должен был бы использовать:

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

без $( )

Не знаю, почему, но теперь это работает! Спасибо, наконец, я увидел, что не так с этого поста!

Ответ 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: Посмотрите на html-код, возвращенный ajax:

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