来自xml数据的javascript ajax更新表

I have already set a way to get ajax request from xml and put into table and works flawlessly but the only thing I can't seem to able to do and need is I want it to update the table every 10 seconds and put the new data in the table as long as it continues.

我已经设置了一种方法来从xml获取ajax请求并放入表中并且完美地工作但是我似乎无法做到和唯一需要的是我希望它每10秒更新一次表并放置新数据在表中,只要它继续。

I have tried setinterval but it is putting the data again and again into the table with continuing loop, while I want it just to check a new data in xml and if found put it in the table.

我已经尝试过setinterval,但是它会一次又一次地将数据放入表中并继续循环,而我希望它只是检查xml中的新数据,如果找到则将它放在表中。

so my html is

所以我的HTML是

<table id="table">
    <thead>
        <tr>
            <th>Lap</th>
            <th>Split 1</th>
            <th>Split 2</th>
            <th>Split 3</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Here is the xml data:

这是xml数据:

<data>
    <user>
        <lap>1</lap>
        <split1>30</split1>
        <split2>30</split2>
        <split3>30</split3>
        <time>90</time>
    </user>
</data>

and last js

和最后的js

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'https://dl.dropboxusercontent.com/s/eovj2kf9ojww5ap/data.xml',
        dataType: 'xml',
        success: parse
    });
});

function parse(xml) {
    $(xml).find('user').each(function() {
        var lap = $(this).find('lap').text();
        var split1 = $(this).find('split1').text();
        var split2 = $(this).find('split2').text();
        var split3 = $(this).find('split3').text();
        var time = $(this).find('time').text();
        $('#table').append('<tr><td>' + lap + '</td><td>' + split1 + '</td><td>' +      split2 + '</td><td>' + split3 + '</td><td>' + time + '</td></tr>');
    }); 
}

https://jsfiddle.net/81xq3edx/

1 个解决方案

#1

Assuming data.xml always contains the dataset you need. I would just empty the table and repopulate it on setInterval.

假设data.xml始终包含您需要的数据集。我只是清空表并在setInterval上重新填充它。

function parse(xml){
 $('#table tbody').empty()
$(xml).find(....
}