web-dev-qa-db-ja.com

jquery AJAX成功コールバックの関数に変数を渡します

JQuery AJAX呼び出しでいくつかの画像をプリロードしようとしていますが、AJAX呼び出しの成功関数内の関数に（url）文字列を渡す際に実際の問題があります（その場合理にかなっています）。

これが私のコードです。

//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配列の単一の値を取る必要があります。

助けてくれてありがとう-私はいつもこれらのコールバックでちょっとひねりを感じているようです。

PROGESS？

だから、@ 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'として提供します。

どのようにこれを回避することができますか？

jqueryajaxcallback
65
Jon

設定オブジェクトはその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：ECHOエンドポイントの動作が変更されたように見えるため、更新されたJSFiddleの例を追加します： https://jsfiddle.net/djujx97n/26 / 。

これがどのように機能するかを理解するには、ajaxSettingsオブジェクトの「context」フィールドを参照してください。 http://api.jquery.com/jquery.ajax/ 、特にこの注意：

」すべてのコールバック内のthis参照は、設定で$ .ajaxに渡されるコンテキストオプション内のオブジェクトです。コンテキストが指定されていない場合、これはAjax設定自体への参照です。 「

161
Paul Zaczkowski

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

次のようなものを試してください（URLを取得するには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 から取得

7
Felipe Pereira

このようなパラメーターを渡すことはできません。成功オブジェクトは、1つのパラメーターを持つ匿名関数にマップされ、それが受信データです。パラメータとして(data, i)を使用するforループの外側に関数を作成し、そこでコードを実行します。

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
PiSquared

私はこのようにしています：

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

何かを助けるかもしれない場合に私が持っていた同様の問題を共有するために、私は使用していました：

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

ロード関数の変数を作成するには、しかし、私は使用する必要がありました：

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

$( )なし

理由はわかりませんが、今では機能します！ありがとうございます

0
Alex

私は最近問題に会った。ファイル名の長さが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");
0
megaten