AJAX数据显示问题

tulao7 2018-12-19 10:03:32

<html>
<head>
<meta charset='utf-8'>
<title>hello</title>
</head>
<body>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
function check(){
$.ajax({
type:"GET",
url:"./demo.php",
dataType:"json",
success:function(data){
if(data.success){
var count = data.info.length;
for(i=0;i<1;i++){
var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";
var tag = '#'+data.info[i].id;
if(!$(tag).length){
$("#info").append(dom);
}
}
}else{
alert('error');
}
},
error:function(res){
alert(res.status);
}
});
}
window.setInterval(check, 1000); //每秒执行一次
</script>
<body>
<div style='width:600px;margin:0 auto;'>
<table border='1' width="600px">
<thead>
<tr><th>id</th><th>name</th><th>email</th></tr>
</thead>
<tbody id='info'>
<tr align='center' id='111'><td>111</td><td>测试</td><td>aaa@aaa.com</td></tr>
</tbody>
</table>
</div>
</body>
</html>

这个代码实现了AJAX实时更新，但是数据是累计的，就是第一条数据出来显示1，下一条出来了，累计为2。我想要的是只显示最新的1条数据，怎么改一下，求教大神

...全文

110 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

winzond 2018-12-20

打赏
举报

添加元素http://www.runoob.com/jquery/jquery-dom-add.html，删除元素http://www.runoob.com/jquery/jquery-dom-remove.html

winzond 2018-12-20

打赏
举报

你想只显示一条数据，把旧的数据清除就可以了，了解一下jQuery操作元素，在此之前，要详细了解HTML，HTML负责显示的内容，CSS负责布局，JS负责行为，jQuery是JS的一部分

tulao7 2018-12-19

打赏
举报

引用 5 楼 winzond 的回复:

<html>

<head>

    <meta charset='utf-8'>

    <title>hello</title>

</head>

<body>

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<script>

    function check(){

        $.ajax({

            type:"GET",

            url:"./demo.php",

            dataType:"json",

            success:function(data){

                if(data.success){

                        var i = data.info.length - 1;           //改这里

                        var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";

                            var tag = '#'+data.info[i].id;

                            if(!$(tag).length){

                                $("#info").append(dom);

                            }

                }else{

                    alert('error');

                }

            },

            error:function(res){

                alert(res.status);

            }

        });

    }

    window.setInterval(check, 1000); //每秒执行一次

</script>

<body>

    <div style='width:600px;margin:0 auto;'>

        <table border='1' width="600px">

            <thead>

                <tr><th>id</th><th>name</th><th>email</th></tr>

            </thead>

            <tbody id='info'>

                <tr align='center' id='111'><td>111</td><td>测试</td><td>aaa@aaa.com</td></tr>

            </tbody>

        </table>

    </div>

</body>

</html>

我也是菜鸟，不管是菜鸟还是老鸟，起码得把每条语句的意思搞明白，不然，你改了一个字都可能无法运行，无法变成你自己需要的东西的。最好是后台只返回最后一条数据，有利于传输

后台数据现在只提供一条：

{"success":true,"info":[{"id":"5","bh":"7","zb":"\u8001\u5e74\u7ec4","xm":"\u5e7f\u573a\u8f7b\u5668\u68b0\u5065\u8eab\u821e","dw":"\u6cb3\u5317\u7701\u65e0\u6781\u9f99\u97f5\u8170\u9f13\u827a\u。。。。

但是前端显示的数据会累计，刷新页面后就显示当前数据了

tulao7 2018-12-19

打赏
举报

还是追加，为只想显示一条最新数据，就是当前参赛队的最后成绩。

winzond 2018-12-19

打赏
举报

<html>

<head>

    <meta charset='utf-8'>

    <title>hello</title>

</head>

<body>

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<script>

    function check(){

        $.ajax({

            type:"GET",

            url:"./demo.php",

            dataType:"json",

            success:function(data){

                if(data.success){

                        var i = data.info.length - 1;           //改这里

                        var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";

                            var tag = '#'+data.info[i].id;

                            if(!$(tag).length){

                                $("#info").append(dom);

                            }

                }else{

                    alert('error');

                }

            },

            error:function(res){

                alert(res.status);

            }

        });

    }

    window.setInterval(check, 1000); //每秒执行一次

</script>

<body>

    <div style='width:600px;margin:0 auto;'>

        <table border='1' width="600px">

            <thead>

                <tr><th>id</th><th>name</th><th>email</th></tr>

            </thead>

            <tbody id='info'>

                <tr align='center' id='111'><td>111</td><td>测试</td><td>aaa@aaa.com</td></tr>

            </tbody>

        </table>

    </div>

</body>

</html>

tulao7 2018-12-19

打赏
举报

我需要的就是前端只显示最新端一条数据即可。

tulao7 2018-12-19

打赏
举报

引用 1 楼 winzond 的回复:

for(i=0;i<1;i++)这条语句是不是多余的？永远只执行一次。还有你每秒就AJAX一次，本机上测试没多大问题，远程了，怕是不太理想吧，我不知道会不会太频繁了。
只显示最后一条信息，方法一：后台只返回最后一条信息；方法二：前端只取最后一条数据。
var i = data.info.length - 1;

var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";

我这个就是本地显示，实时比分显示用，没有用户访问。请把你的代码写完整一些可以吗，本人是菜鸟

tulao7 2018-12-19

打赏
举报

源代码是这样的

var count = data.info.length;
for(i=0;i<count;i++){
var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";
var tag = '#'+data.info[i].id;
if(!$(tag).length){
$("#info").append(dom);
}
}
}else{
alert('error');
}
},

winzond 2018-12-19

打赏
举报

for(i=0;i<1;i++)这条语句是不是多余的？永远只执行一次。还有你每秒就AJAX一次，本机上测试没多大问题，远程了，怕是不太理想吧，我不知道会不会太频繁了。
只显示最后一条信息，方法一：后台只返回最后一条信息；方法二：前端只取最后一条数据。

var i = data.info.length - 1;

var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td><td>"+data.info[i].email+"</td></tr>";