0

ajaxリクエストの実行中にインジケーターを表示するには、ページ要素にアニメーションgifを配置したインジケーターを表示し、ajax関数が成功したらデータを置き換える必要があるという情報を取得しました。

インジケーター ソースを src="ajax-loader.html" で追加すると、ajax 呼び出しはそれをそのままにして、データに置き換えません。インジケーター ソースを .load("ajax-loader.html") で追加すると、ajax 呼び出しの前にまったく表示されません。beforesend イベントの ajax 呼び出しに追加しても表示されません。2 つの ajax 呼び出しを行うと、1 つはインジケーターをロードし、もう 1 つはデータをロードするために同じことが起こります。この単純なコードでインジケーターを表示する方法が必要です。

これはページ要素の HTML です。

   <iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>

これはインジケーターの HTML です。

<html>
<head></head>
<body>
    <img src='images/ajax-loader.gif'/>
</body>
</html>

これがコードです

  1. .load の呼び出し

    $(document).ready(function(){
$('#lcupco').load("ajax-loader.html");});

$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

  2. beforesend の使用

`

   $.ajax({
            url: 'luxcal/index.php?cP=40',   
            cache: false,
            async: true,
            beforeSend: function() { 
                $('#lcupco').load('ajax-loader.html');
                // $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either.
            },
            success: function(data) {
            $('#lcupco').html(data);   
            },
    });
  1. 2 つの ajax 呼び出しの使用: 1 つはインジケーター用、もう 1 つはデータ用

`

$.ajax({   
    url: 'ajax-loader.html',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});


$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    beforeSend: function() { 
        $('#lcupco').html('<html>Initializing calendar...</html>');
    },
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

`

4

3 に答える 3

0

それを試してください： 

$.ajax({
                url: 'luxcal/index.php?cP=40',   
                cache: false,
                async: true,
                beforeSend: function() { 
                    $('#lcupco').append($('<img class="indic" src="images/ajax-loader.gif"/>'));
                },
                success: function(data) {
                    $('#lcupco', '.indic').remove();
                    $('#lcupco').html(data);   
                },
        });

また、 src属性が単一引用符 (') の代わりに二重引用符 (") を取ることを忘れないでください。

于 2011-12-27T17:06:53.873 に答える
0

srcすべての影響について考えられる説明は、単純に、内部 HTML を設定したり、iframe のコンテンツをロードしたりできないということです。これは、ブラウザーがその属性に基づいて iframe のコンテンツを決定するためです。

とにかく、非同期呼び出しに iframe を使用することは通常ありません。単純な div が機能するはずです。divを使用して、前にhtmlを設定し（html()またはload()関数で）、完全なハンドラーに置き換えるとうまくいきます。

于 2011-12-27T17:09:03.857 に答える