Question

我到数据库的获取时间为3-5秒。所以现在我只想在获取数据时将图像或任何东西加载到表中。可以在javascript中做到吗？

这里是我的按钮，用于触发加载和表格读取：

<button style="float:right" type="button" onclick="LoadDB()" class="btn btn-primary">Load DB</button>

 <table class="sortable" id="DB">
    <thead>
        <tr>
            <th>Names</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td></td>
            <td></td>
        </tr>

    </tbody>
</table>

脚本将数据填充到表中

function LoadDB() {        

        $.ajax({
            url: '/Home/ReadDB',
            type: 'GET',

            dataType: 'json',
            success: function (data) {
                var row = '';
                $.each(data, function (i, item) {
                    row += '<tr><td style="display:none;"  >' + item.Name + '</td><td>' + item.Age
                        + '</td><td width="50%">' + '<button style ="width:80px" type="button" class="btn btn-primary"> Add </button >' + '</td></tr>';

                });
                console.log(row)
                $('.sortable#DB2 tbody').html(row); // override previous results              
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    }

Answer 1

按如下所示更改ajax请求以显示正在加载的图像，直到通过调用image_loader函数从数据库加载数据为止。获得ajax响应后，图像将被替换为数据。

function image_loader()
{
$(".sortable#DB2 tbody").html("<img src='loading.gif' alt='Loading...' >");
}

function LoadDB() {        
    $.ajax({
        url: '/Home/ReadDB',
        type: 'GET',
        start: image_loader(),
        dataType: 'json',
        success: function (data) {
            var row = '';
            $.each(data, function (i, item) {
                row += '<tr><td style="display:none;"  >' + item.Name + '</td><td>' + item.Age
                    + '</td><td width="50%">' + '<button style ="width:80px" type="button" class="btn btn-primary"> Add </button >' + '</td></tr>';

            });
            console.log(row)
            $('.sortable#DB2 tbody').html(row); // override previous results              
        },
        error: function (jqXhr, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });

}

有关Jquery ajax中start方法的更多信息，您可以查看here

异步加载表

1 个答案: