来自xml数据的javascript ajax更新表

时间:2016-08-10 15:30:28

标签: javascript jquery ajax xml

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

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

所以我的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>

这是xml数据:

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

和最后的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 个答案:

答案 0 :(得分:0)

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

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