Html jquery AJAX 循环 延时 刷新

JSON(PHP)

<?php
@header("content-type:application/json;charset=UTF-8");
echo '{ "status":200, "data":{ "name":"55", "student":[ {"id":10001,"name":"张三"}, {"id":10002,"name":"李四"} ] }, "msg":"错误信息" }';

?>
View Code

html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="jquery.js" type="text/javascript"></script>
    <script>


    function getData(){
        $.get("ceshi1.php",function(data){
            if(data.status===200){
                    var cls=data.data;
                    $("legend").text(cls.name);
                    var students=cls.student;
                    for(let index=0;index<students.length;index++){
                        const stu=students[index]; //把每一个数据都给stu
                        //append()追加
                        $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
                    }
            }else{
                    console.log(msg);
            }
            if(cls.name=="55"){
                clearTimeout(t);
            }    
      })
    }
    t = setInterval("getData()",2000);    
    </script>
</head>
<body>
    <legend>ggg</legend>
    <table class="data">
        <thead>
            <th>id</th>
            <th>name</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js" type="text/javascript"></script>
    <script>

    i = 0;
    function getData(){
        i++;
        if(i==5){
            clearTimeout(t);
        }
        $.get("ceshi1.php",function(data){
            if(data.status===200){
                var cls=data.data;
                $("legend").text(cls.name);
                $("i").text(i);
            }else{
                console.log(msg);
            }
            if(cls.name=="55"){
                clearTimeout(t);
            }    
      })
    }
    t = setInterval("getData()",2000);    
    </script>
</head>
<body>
    <legend>ggg</legend>
    <i>ggg</i>
</body>
</html>


 


 




 






            

            
posted @ 
2023-03-19 17:07 
钢锅 
阅读(65) 
评论(0) 
编辑 
收藏 
举报