aynı sayfada birden fazla unsurları üzerinde jQuery AJAX canlı güncelleştirme

2 Cevap php

Bazı AJAX delving ve ben jQuery kullanmaya çalışıyorum.

Ben birden fazla sayfa ve her sayfanın yanındaki bağlantıları bir indeks sayfası var bir görünüm sayısıdır.

Ben sayfada bu sayfa sayıları canlı güncellemelerini görüntülemek böylece birkaç saniyede yenileme ve otomatik güncelleştirmek için görünümü saymak istiyorum.

Ben sayfada bir tek Ajax eleman dayalı iyi çalışır aşağıdaki komut rastlamak, ama ne 10 veya daha fazla ilgili değil mi?

Ayrı ayrı güncellemek için tüm alanları almak için (10 kez kesme ve deyimi yapıştırarak kısa) daha etkili bir yolu var mı?

<?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']);
    };
?>

Bu HTML sayfasına kod si.

<!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>

Bu script / kod daha verimli hale nasıl herhangi bir öneri büyük ölçüde kabul edilecektir.

Saygılarımızla,

P.

2 Cevap

Bir kez JSON dizi olarak en kimlikleri tüm gönder. Sunucu tarafında, kimlikleri / sayımların anahtar / değer çiftlerini içeren bir JSON nesnesi oluşturmak. Sonra sonuç almak zaman istemci üzerindeki tuşlar yineleme ve ilgili DIV da her sayısını ayarlayın.

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

JSON önerileri için teşekkürler, ben yine de bunu uygulamak nasıl emin değildi ve ben şimdiye kadar oldukça iyi çalışıyor bu çözüm ile geldim. Görüşleri harika olurdu.

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

Ve HTML içinde sadece size güncellenen istediğiniz elemanı ve kimliği örneğin gibi mağaza 'kimlik' için sınıf 'görüşlerini' atamak:

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

etiketler