如何使用 Ajax 刷新 table 数据

Question

如何使用 Ajax 刷新 table 数据，尝试了以下代码，但它刷新了整个页面而不是特定部分，URL "/refresh" 是请求 Slim(framework) 调用 PHP 函数 "getData"，函数 "getData" 是一个 Mysql 查询 "select server_name from server_data"，更改以下行的结果

$(".result").html(结果);整个页面刷新 $('#result').html(结果);数据完全没有刷新。

我需要在单击刷新按钮时只刷新 table 数据而不刷新整个页面。

<html>
    <script type="text/javascript">
        $(document).ready(function() {
        $('.refresh_data').click(function() {

            $.ajax({
                url: "/refresh",
                method: "GET",
                success: function(results) {
                        $('#result').html(results);
                }
            });
        });
    });
    </script>

    <body>
        <div align=right>
            <button type="button" class="bnt btn-info btn-dark btn-sm refresh_data">Refresh<i class="fa fa-refresh" aria-hidden="true"></i></button>
        </div>
    <div class="result"  align=center>
        <table id="hostTable" class="table table-striped table-bordered table-sm mb-0">
            <thead>
                <tr>
                    <th class="text-center h6 th-sm font-weight-bold">Server Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>name</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

来自， Akash.V

Answer 1

首先在$('#result').html(results); 时不刷新内容，因为#result不存在，在html中唯一的结果是一个class所以.result.

所以为了让它工作，代码必须是：$('.result').html(results); .

第二个问题，你确定回复是HTML？

最后，检查加载函数。 .load()，也许它会更好地满足您的需求。

.load( url [, data ] [, complete ] )

Description: Load data from the server and place the returned HTML into the matched elements.

如何使用 Ajax 刷新 table 数据

How to refresh table data with Ajax

ajax

using

refresh

.load( url [, data ] [, complete ] )