使用 JQUERY 刷新 AJAX 表答案

【问题标题】：AJAX Table refresh with JQUERY使用 JQUERY 刷新 AJAX 表
【发布时间】：2013-12-04 15:37:09
【问题描述】：

我想刷新一个用 JSON 数据填充的表，例如每 5 秒。

应该在没有完整的站点刷新的情况下刷新表格。应该添加新项目，应该删除丢失的项目。现在如何使用 AJAX 刷新它？

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<table face="comic sans ms" border="1" id="usertable"></table>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
        $.getJSON('./url.php', function(data) {
            var cars = data.rec.vehicles.vehicles;
            $.each(cars, function(key, data){
                console.log(data.carName);
                var vint=data.vin;
                var coopers="";
                var tanken="";
                var drive="MAN";
                var fuelfarbe="#01DF3A";
                var prozent="%";
                var v=vint.substring(3,7);
                if(v=="SX31"){coopers=" S";}
                if(v=="SW71"){coopers=" SD";}
                if(data.auto=="Y"){drive="AUT";}
                if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; fuelfarbe="#FF4000";}
                $('#usertable').append(
                    function() {
                        return "<tr>"+
                                    "<td>"+data.carName+"</td>"+
                                    "<td>"+data.model+coopers+"</td>"+
                                    "<td>"+drive+"</td>"+
                                    "<td>"+data.fuelState+prozent+"</td>"+
                                    //"<td>"+data.address+"</td>"+
                                    "<td>"+data.licensePlate+"</td>"+
                                    "<td>"+tanken+"</td>"
                                "<tr>"; 
                    }
                );
            })
        });
    });
</script>
</body>
</html>

【问题讨论】：

尝试使用window.setInterval
我强烈建议您考虑使用类似 Knockout 的东西来完成类似的事情。否则，当需要进行更改时，你会拔掉头发。 knockoutjs.com

标签： jquery json ajax html-table

【解决方案1】：

将getJSON 保留在函数中

function dummy()
{
    $(function() {
        $.getJSON(
        "url",
        function(json){ });
    });
}

和

给

setInterval( dummy, 5000 );

【讨论】：

好的，我现在试过了。现在的问题：表内容被添加到现有表中......有什么问题？<!DOCTYPE html> <html> <head> //..// </head> <body> <script type="text/javascript"> $(document).ready(function(){ function callJSON() { setTimeout(function () { $.getJSON('./url.php', function(data) { var cars = data.rec.vehicles.vehicles; $.each(cars, function(key, data){ //..// } ); }) }).always(callJSON); }, 5000); } $(callJSON); }); </script> </body> </html>
对不起 :) .. 我是一个该死的初学者... 我上面提到的代码有什么需要改变的？谢谢:)
简单地在每个 ajax 请求上使用 empty 清空表，然后用新数据填充它。
所以我把 empty() 放在 Call 之前？ ` }).always(callJSON); }, 5000); } 空（用户表）； $(callJSON);`
我添加了 usertable.empty();但它说这不是一个函数