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

.each()url を呼び出しに渡す (失敗した) 試みを見ることができ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非同期タスクが実際にループに到達した時間は終了し、完了します (したがって、値は 3 になります) image_link(data, i)。for...言うまでもなく、これはurls[i]「未定義」となります。

これを回避するための（その他の）ヒントはありますか？

4

7 に答える 7

185

this設定オブジェクトはその ajax 呼び出しに関連付けられているため、インデクサーをカスタム プロパティとして追加するだけで、成功のコールバックで使用してアクセスできます。

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

編集: ECHO エンドポイントの動作方法が変更されたように見えるため、更新された JSFiddle の例を追加します: https://jsfiddle.net/djujx97n/26/。

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

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

于 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

このようなパラメーターを渡すことはできません。成功オブジェクトは、1 つのパラメーターを持つ無名関数にマップされ、それが受信データです。パラメーターとして受け取る 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

最近問題に遭遇しました。ファイル名の長さが 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 に答える