jQuery同じページの複数の要素のAJAXライブ更新

私はいくつかのAJAXを掘り下げており、jQueryを利用しようとしています。jQuery同じページの複数の要素のAJAXライブ更新

私は複数のページにリンクするインデックスページを持ち、各ページの隣にはビュー数があります。

ビュー数を更新して、数秒ごとに自動的に更新して、ページ上のそれらがページカウントのライブ更新を表示できるようにしたいと思います。

私は、ページ上の単一のAjax要素に基づいてうまく動作する次のスクリプトを紹介しましたが、10個以上は何ですか？

すべてのフィールドを個別に更新するには、より効率的な方法（文を10回切り取り、貼り付けるのに手間がかかります）がありますか？

<?php 
// File: ajax.php 
    // Ajax refresh hits 
    if(isset($_GET['refresh'])){ 
     // Uses the get_page_views() function which takes an ID and retreives that page view count. The ID is passed by the AJAX script. 
     if($_GET['refresh'] == 'hits') echo get_page_views($_GET['id']); 
    }; 
?>

これはHTMLページのコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax - PHP example</title> 

<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
     //ajax.php is called every second to get view count from server 
     var ajaxDelay = 1000; 
     setInterval(function(){ 
      // Refresh details. 
      $('#zone-111').load('ajax.php?refresh=hits&id=111'); 
      $(#zone-222').load('ajax.php?refresh=hits&id=222'); 
      $(#zone-333').load('ajax.php?refresh=hits&id=333'); 
      $(#zone-444').load('ajax.php?refresh=hits&id=444'); 
      $(#zone-555').load('ajax.php?refresh=hits&id=555'); 
     }, ajaxDelay); 
    }); 
</script> 

</head> 

<body> 

<div align="center" id="zone-111">--</div> 
<br /> 
<div align="center" id="zone-222">--</div> 
<br /> 
<div align="center" id="zone-333">--</div> 
<br /> 
<div align="center" id="zone-444">--</div> 
<br /> 
<div align="center" id="zone-555">--</div> 
<br /> 

</body> 
</html>

このスクリプト/コードをより効率的にする方法についてのご意見は、大いに受け入れられます。

種類について、

出典

2009-08-14 paperclip

はJSON配列として一度IDの全てを送ります。サーバー側では、ID /カウントのキー/値のペアを含むJSONオブジェクトを作成します。次に、結果を取得したときにクライアント上のキーを反復し、関連するDIVで各カウントを順番に設定します。

$(document).ready(function(){ 
    //ajax.php is called every second to get view count from server 
    var ajaxDelay = 1000; 
    var ids = []; 
    $('[id^="zone-"]').each(function() { 
     ids.push(this.id); 
    }); 
    setInterval(function(){ 
      $.ajax({ 
       url: 'ajax.php', 
       dataType: 'json', 
       type: 'get', 
       data: { refresh: 'hits', ids: ids }, 
       success: function(data) { 
        for (var key in data) { 
         var div = $('#zone-' + key).html(data[key]); 
        } 
       } 
      }); 
    }, ajaxDelay); 
});

出典

2009-08-14 10:34:30 tvanfosson

JSONの提案のためのおかげで、私はしかし、それを実装する方法をかなり確実ではなかったと私は今のところ非常にうまく動作します。このソリューションを作ってみました。フィードバックは素晴らしいでしょう。

<script type="text/javascript" language="javascript"> 
     $(document).ready(function(){ 
      setInterval(function(){ 
       $('.views').each(function(){ 
        $(this).load('ajax.php?id='+this.id); 
       }); 
      }, 5000); 
     });  
    </script>

そしてHTMLにあなただけがIDなどのように更新して保存「ID」する要素にクラスの見解 "割り当てる：

<p class="views" id="123"><!-- content appears here. --></p>

を

出典

2009-08-14 13:21:14 paperclip

jQuery同じページの複数の要素のAJAXライブ更新

答えて

関連する問題