Ajax+setInterval实时更新

要求页面部分数据更新，具有实时性。需要用到定时器(setInter)和异步技术(Ajax)

首先前段页面

index.php
<div class=”count” id=”count” >100</div>
<script src=”/js/jquery-2.1.1.min.js”></script>
<script type=”text/javascript”>
    setInterval(function(){
        $.ajax({
            type:”post”,
            dataType:”json”,
            url: ‘index.php?r=test/getdata’,
            success:function(data){
                $(“#count”).html(data[0][‘id’]);
                //console.log(data[0][‘id’]);
            },
            error: function(){
                alert(‘wrong’);
            },
        });
    },3000);

</script>

后端处理页面，可以从数据库获取数据也可以中接口，这里自定义数组

public function actionGetdata()
    {
        $data = array(
            array(‘id’=>4,’name’=>’test1’
        );
        echo json_encode($data);

    }

    public function actionIndex(){
        return $this->render(‘index’);
    }

浏览器访问

http://test-advanced.com/index.php?r=test/index #test表示控制器，index表示方法

更改数组里的id，前段页面数据实时变化