0

私はxmlファイルの配列を取得するjqueryを書いています。次に、これらをループし、解析してページに表示します。私はこれを機能させていますが、内容を一覧表示する前に、ファイルの名前を出力したい場合に実行したいことが1つあります。これが私が持っているコードです。

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        menuitems.append(catName);

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var name =  $(this).find('name').text();
                    var price = $(this).find('price').text();
                    menuitems.append(name + " - $" +price + "<br />");
                });
            }
        });
    }
});

これは無効ですが、これを行うと機能します

$.ajax({
                type: "GET",
                url: url,
                async: true,
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('item').each(function(){
                        var name = $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            }).delay();

だから私はそのajax呼び出しの後に適切に遅延を追加する必要があると思います

4

2 に答える 2

1

これは、現在の実行パスが終了するまでAjaxコールバックが実行されないために発生します。これを回避するには、ajaxコールバック内でcatNameを追加するまで待つことができます。これは機能するはずです：

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: (function(catName){
                return function(xml) {
                    menuitems.append(catName);

                    $(xml).find('item').each(function(){
                        var name =  $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            })(catName)
        });
    }
});

あなたはまだ（元のコードと同じように）あなたのリクエストが完了することができる順序を保証していないので、時々appetizers.xmlそしてbeer.xml逆の順序でロードされます。

于 2012-06-19T18:27:41.800 に答える
0

これは、forループがAJAX呼び出しよりも高速であるために発生しています。AJAXの最初のAは非同期であることに注意してください。これを想像してください...

あなたはforループの始まりにいます。最初のを取り、catNameそれをに追加しますmenuitems。次に、AJAX呼び出しを起動して、のそれぞれのnameとをフェッチします。その間、AJAXリクエストはまだ応答していないので、1つを2つ目に移動して、別のAJAXリクエストを起動します。最初のリクエストは完了しておらず、2番目のリクエストを送信しました。これで、2つのAJAX応答が保留になりました。その間に、3番目に移動します。priceitemcatNamecatNamecatName

などなど...

ソリューション

  1. async内部AJAX呼び出しのプロパティをに設定しますfalse。これにより、リクエストが完了するまでforループが一時停止します。
  2. **推奨** forループの前にAJAX呼び出しを行い、この配列を使用してforループを実行するよりも、応答をどこかに（おそらく配列内に）格納します。
于 2012-06-19T13:10:46.140 に答える