Передать переменную в функцию в jQuery AJAX success callback

Я пытаюсь предварительно загрузить некоторые изображения с помощью вызова AJAX jQuery, но у меня возникли реальные проблемы с передачей строки (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 файлы?



...в любом случае, он должен, конечно, принимать одно значение в моем исходном массиве URL-адресов.



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




прогресс?



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



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

956   7  

7 ответов:

поскольку объект settings привязан к этому вызову 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);       
};

Edit: добавление в обновленный пример JSFiddle, поскольку они, похоже, изменили способ работы своих конечных точек ECHO:https://jsfiddle.net/djujx97n/26/.

чтобы понять, как это работает, см. поле "контекст" на объекте ajaxSettings: http://api.jquery.com/jquery.ajax/, конкретно это примечание:

" The this ссылка во всех обратных вызовах-это объект в контексте, переданный в $.ajax в настройках; если контекста нет указано, что это ссылка на сами настройки Ajax."

150  
2018-08-10 18:56:52

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

принято от здесь

7  
2017-05-23 15:02:46

вы не можете передать такие параметры - объект success сопоставляется с анонимной функцией с одним параметром, и это полученные данные. Создайте функцию вне цикла 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)
}
6  
2013-08-24 04:29:38

вы также можете использовать 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  
2016-05-24 09:49:35

Я делаю это так:

    function f(data,d){
    console.log(d);
    console.log(data);
}
$.ajax({
    url:u,
    success:function(data){ f(data,d);  }
});
3  
2016-09-24 14:54:31

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

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

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

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

без $( )

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

0  
2013-11-27 03:37:56

недавно я столкнулся с этой проблемой. Проблема приходит, когда длина имени файла больше, чем 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)) не может найти правильный расширение.

но если вы установите значение

0  
2016-04-14 05:17:01

Comments

    Ничего не найдено.
Click here to cancel reply.