Fatal编程技术网
  • php/
  • Php 同一页面上多个元素的jQuery AJAX实时更新

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

php jquery ajax

Php 同一页面上多个元素的jQuery AJAX实时更新,php,jquery,ajax,Php,Jquery,Ajax,我正在钻研一些AJAX，并尝试使用jQuery 我有一个链接到多个页面的索引页面，每个页面旁边都有一个视图计数 我想查看计数刷新和自动更新每两秒钟，使那些在页面上可以查看页面计数的实时更新 我已经了解了下面的脚本，它基于页面上的单个Ajax元素运行良好，但是10个或更多如何 有没有更有效的方法（除了剪切和粘贴语句10次）让所有字段单独更新 <?php // File: ajax.php // Ajax refresh hits if(isset($_GET['refresh

我正在钻研一些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>


Ajax-PHP示例
$（文档）.ready（函数（）{
//每秒调用一次ajax.php以从服务器获取视图计数
var ajaxDelay=1000；
setInterval（函数（）{
//刷新详细信息。
$（'#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'）；
}，延迟）；
});
--


--


--


--


--
任何关于如何使此脚本/代码更高效的建议都将被广泛接受

亲切问候,

p.

一次将所有ID作为JSON数组发送。在服务器端，构建一个JSON对象，其中包含ID/计数的键/值对。然后在得到结果时遍历客户机上的键，并在相关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);
});
一次将所有ID作为JSON数组发送。在服务器端，构建一个JSON对象，其中包含ID/计数的键/值对。然后在得到结果时遍历客户机上的键，并在相关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);
});
感谢JSON的建议，我不太确定如何实现它，我已经提出了这个解决方案，到目前为止效果非常好。反馈会很好

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


$（文档）.ready（函数（）{
setInterval（函数（）{
$（'.views'）。每个（函数（）{
$（this.load（'ajax.php？id='+this.id）；
});
}, 5000);
});
在HTML中，您只需将类“视图”分配给要更新的元素，并将“ID”存储为ID，例如：

<p class="views" id="123"><!-- content appears here. --></p>
感谢JSON的建议，但我不太确定如何实现它，我已经提出了这个解决方案，到目前为止效果很好。反馈会很好

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


$（文档）.ready（函数（）{
setInterval（函数（）{
$（'.views'）。每个（函数（）{
$（this.load（'ajax.php？id='+this.id）；
});
}, 5000);
});
在HTML中，您只需将类“视图”分配给要更新的元素，并将“ID”存储为ID，例如：

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