jQuery AJAX对同一页面上的多个元素进行实时更新

我正在钻研一些AJAX，我正在尝试使用jQuery。

我有一个索引页面链接到多个页面，每个页面旁边是一个视图计数。

我希望视图计数刷新并每隔几秒自动更新，以便页面上的人可以查看页面计数的实时更新。

我来自以下脚本，它基于页面上的单个Ajax元素运行良好，但是10或更多？

有没有更有效的方法（缺少剪切和粘贴语句10次）以使所有字段单独更新？

这是HTML页面的代码。

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

关于如何使这个脚本/代码更有效的任何建议将被大大接受。

亲切的问候，

P.

Answer 1

一次发送所有id作为JSON数组。 在服务器端，构建一个包含ids / count的键/值对的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); }); 

Answer 2

感谢JSON的建议，我不太确定如何实现它，我已经提出了这个迄今为止运行良好的解决方案。 反馈会很棒。

在HTML中，您只需将类“视图”分配给要更新的元素，并将“ID”存储为id，例如：