定期一段时间后,在页面上的<li>组中自动刷新值

Question

我的页面中有一组<li>如http://jsfiddle.net/gaby/zzj7E/5/所示

每个li都有3个跨度......一个用于评论,一个用于查看,一个用于投票.

 <a class="example7" href="userpanel/comment.php?id=578" style="text-decoration:none; color:#666666; "><img src="content/comment/comments.png" width=18 height=18><i>No comments</i></a>
 <span style="text-decoration:none; color:none; margin:5px;"><img src="content/voting/eye.png" > 9</span> 
 <span class="vote"  id="578" name="up" style="text-decoration:none; color:none; margin:5px; "> <img src="/content/voting/yes-enb.png" width=12 height=12 alt=""> <span style="text-decoration:none; color:none">0 </span></span>

我想每2分钟自动刷新每个元素中的值(计数).我知道如何预先添加/附加div,但是如何在li一段时间后刷新所选元素？

此功能非常类似于Facebook每次用户发布内容时自动恢复"评论"计数或"赞"计数的方式.

任何想法我应该如何去做？

Answer 1

PHP是一种服务器端脚本语言,您无法直接编辑已在客户端计算机上显示的值.但是,您可以使用AJAX调用PHP脚本然后将输出解析为您的跨度(最好的方法是在PHP端对JSON_encode您的数组进行编码,然后在JS端进行解码.

function AJAX(){

    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                    xmlhttp.onreadystatechange=function()
                      {
                      if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {

                        var data = xmlhttp.responseText;

                        var decoded = eval( "(" + data + ")" );

                        document.getElementById('span1').innerHTML = avayaevald['1'];
                        document.getElementById('span2').innerHTML = avayaevald['2'];
                        document.getElementById('span3').innerHTML = avayaevald['3'];


                        }
                      }

                    xmlhttp.open("GET","index.php?loadAction=process",false);
                    xmlhttp.send();

}

然后setInterval(AJAX(), 120000);,你将被设置.