Question

我正在深入研究一些AJAX，我正在尝试使用jQuery。

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

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

我已经遇到了以下脚本，它基于页面上的单个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>

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

亲切的问候，

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的建议，我不太确定如何实现它，我已经提出了迄今为止运行良好的解决方案。反馈会很棒。

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

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

2 个答案: