时间戳

首页 > 解决方案 > 如何通过ajax将json对象附加到表中，并在jquery中有时间延迟？

javascript - 如何通过ajax将json对象附加到表中，并在jquery中有时间延迟？

问题描述

我是 js 和 jquery 的新手，我正在创建一个 json 对象以通过外部 json 显示表中的数据。但我想在 json 文件中添加数据，数据在表中自动更新。

$(window).load(function(){      
    $(document).ready(function () {

        var url='json/data.json';
        $.getJSON(url, function (r) {

            for (var i = 0; i < r.length; i++) {
                var tr = $('<tr>');

                tr.append("<td>" + r[i].User_Name + "</td>");
                tr.append("<td>" + r[i].score + "</td>");
                tr.append("<td>" + r[i].team + "</td>");
                $('tbody').append(tr);
            } 

        }); 

    });
});

 <table id="racer_details">
    <tbody>
    </tbody>
</table>

我的 json 数据是，

[
    {
        "User_Name":"John Doe",
        "score":"10",
        "team":"1"
    },
    {
        "User_Name":"Jane Smith",
        "score":"15",
        "team":"2"
    },
    {
        "User_Name":"Chuck Berry",
        "score":"12",
        "team":"2"
    }
]

这是我的示例数据，首先我将 3 个值添加到表中，但我想以时间延迟将值更新到表中，如果我想在 json 中添加一些值，它将在时间延迟后自动更新表中的值。使用 ajax 的 jquery 怎么可能。

标签： javascriptjqueryjsonajax

解决方案

HTML：

   <table id="racer_details">
    <tbody id="racer_data">
    </tbody>
   </table>

JS：您可以使用 ajax 显示这样的数据，

$(window).load(function(){      
    $(document).ready(function () {
        $.ajax({
           type:"GET",
           url:"xyz",
           data:{ 'xyz': xyz },
           contentType:"application/json; charset=utf-8",
           dataType:"json",
           success:function (result){
              var dataTab = $.parseJSON(JSON.stringify(result));
              $.each(dataTab.data, function (index, value) {
                    $("#racer_data").append('<tr>'+value.name+'</tr>
                                 <tr>'+value.scor+'</tr>
                                 <tr>'+value.team+'</tr>'
              },
             error: function(){},
          });

    });
});

推荐阅读