0

以下のコードを汎用にする方法を探しています。私の目的は、1 つのスクリプトで 1 つのページの複数の div (約 100 になるため) を更新することです。以下の構造では、DIV ごとに 1 つのスクリプトが必要です。webservice_getall.asp からの戻り文字列は、解析されたパラメーターに基づいて値を返すことができます (これらは次のようになります: K2、C16、B2 など)。

私の現在のコードは次のようになります。

<body>



<div id='content1'>Loading...</div> 
<div id='content2'>Loading...</div> 
<div id='content3'>Loading...</div> 
<div id='content4'>Loading...</div> 
 ......
<div id='contentN'>Loading...</div> 
</body>


</html>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').show();

            },
            complete: function() {

                $('#content').show();
            },
            success: function() {

                $('#content').show();
            }
        });


        var $container = $("#content");
        $container.load("webservice_getall.asp?request=contentN");
        var refreshId = setInterval(function()
        {
            $container.load('webservice_getall.asp?request=contentN');
        }, 1000);
    });
})(jQuery);
</script>
4

1 に答える 1

1
今、私が持っている「コンテンツ」を使用して、文字列から 1 つの値だけで代わりに完全な文字列を取得します。

その場合は、ご返却の形式によって多少異なります。コンマで区切られた単一のテキスト文字列を取得していると仮定します。JSON の戻り値などを取得している場合は、これを適切に変更する必要があります。

まず、戻り値を配列に変換する必要があります。JavaScript のstring.splitメソッドを使えば簡単です。
注: 内容を十分に説明していません。この方法は、サンプル コンテンツが代表的なものであり、コンマが内部に含まれるコンテンツのチャンクが存在しないことを前提としています。つまり、コンマはコンテンツ要素を区切るためにのみ使用されます。個人的には、通常はすべてを json エンコードしてそれで作業しますが、それは私です。

配列を取得したら、適切なセレクターと.each()メソッドを使用して div を反復処理し、対応するフィールドを配列から各 div に配置できます。

注：私は、常にページ上で開始することを前提とする単純な方法を選択しid=content1ました...または、そうしていない場合は、開始コンテンツが何であれ、常に配列に適切な開始値を返すことを前提としています（サーバーを呼び出すときに開始インデックス no を含めて、そこからその開始点からの正しい数の要素を返すのは簡単だからです）。

この時点で、コードは次のようになります。

TODOは、すべてのコンテンツを一度に呼び出すために使用しているクエリ文字列に置き換えます。あなたの質問の例は明らかにあなたの古いコードであるため、あなたはそれをあまり明確にしていません。"webservice_getall.asp?request=allcontent"get

<body>

<div id='content1'>Loading...</div> 
<div id='content2'>Loading...</div> 
<div id='content3'>Loading...</div> 
<div id='content4'>Loading...</div> 
 ......
<div id='contentN'>Loading...</div> 
</body>

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $.ajaxSetup( {
      cache: false,
      beforeSend: function() {
        $('#content').show();
      }, 
      complete: function() {
        $('#content').show();
      }, 
      success: function() {
        $('#content').show();
      }
    });
    $.get("webservice_getall.asp?request=allcontent", function(contentReturn){
      contentReturn = contentReturn.split(',');

      $('div[id^="content"]').each(function (index) {
        $(this).html(contentReturn[index]);
      });
    });
    var refreshId = setInterval(function() {
      $.get("webservice_getall.asp?request=allcontent", function(contentReturn) {
        contentReturn = contentReturn.split(',');

        $('div[id^="content"]').each(function (index) {
          $(this).html(contentReturn[index]);
        });
      });
      },
      1000);
  });
})(jQuery);
</script>
</html>

jsfiddle でのこの例を次に示します(明らかに AJAX を使用していませんが、これは原理の実際のデモンストレーションです)。

この方法では、単一のセレクターを使用して各 div 要素を 1 回だけ反復するため、かなりまともなパフォーマンスになるはずです (たとえば、配列を反復し、各配列要素に新しいセレクターを使用して各 div に対処するのとは対照的です。代わりに配列を反復処理したい場合は、より良い方法ではありません。これは、すべきでないことの例としてです)。警告は、特にページ全体が単一の AJAX 呼び出しに依存している場合に、本当に大きなページでどのように実行されるかがわからないことです。

showまた、なぜ何度も電話をかけてくるのかわかりませんが#content、そのままにしておきました。私はあなたがそれで何をしているのかを知っていて、それに応じて行動すると仮定します. 新しい WIP ソリューションについての詳細がほとんど示されていなかったので、私は単にあなたが提供したものを適応させただけです。どこに行くべきかを示してくれることを願っていますが、あなたが与えた詳細がどれほど少ないかで、そのままでうまくいくとは約束できません.

于 2013-01-10T03:49:54.920 に答える