JQuery/Ajax html 仅加载一次

Question

我正在尝试制作一个几乎实时显示两个数据库中的数据的页面。我遇到的问题是 JQuery Ajax 调用仅更改 html 一次HTML 代码：    <div class="database">    <h1>Trying to connect...</h1>    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(".database").each(function update()        {            var self = this;            var i = 0;            $.ajax(                {                    url: "/show",                    method: 'GET',                    cache: false,                    success: function (data) {                        $(self).html(data);                        console.log(data);                    }                }            )           setTimeout(update, 10000);        });        update();    </script></div>在 /show 上运行的 PHP 代码    try    {        $SosAlerts = DB::connection('MSSQLSERVER01')->select('select TOP(10) * from SosAlert ORDER BY date_time DESC');        echo "<h3>MSSQLSERVER01</h3>              <table>        <tr>                <th>SosAlertID</th>                <th>XCoordinate</th>                <th>YCoordinate</th>                <th>Date And Time</th>              </tr>";        foreach ($SosAlerts as $sosAlert) {            echo "<tr>                <td> " . $sosAlert->SosAlertID . "</td>                <td>" . $sosAlert->XCoordinate . "</td>                <td>" . $sosAlert->ZCoordinate . "</td>                <td>" . $sosAlert->date_time . "</td>            </tr>";        }问题是，第一次调用时只$(self).html(data)更新一次 html 内容，之后就不再改变了。显示每 10 秒进行一次 ajax 调用，并且在更新数据库时正确更改数据。即我运行 HTML 页面，它显示尝试连接...，之后它更改为显示 10 行的表，并且控制台日志中显示相同的内容，在接下来的 10 秒内我在数据库中插入新行，重复调用，控制台日志转储数据时显示新行，但 html 未更改<div class="database">console.log(data)

Answer 1

我怀疑对的引用self在函数调用中丢失了。第一个this引用迭代中的元素.each()，但我打赌该迭代之外的后续调用this引用函数本身。

这种让函数调用本身的方法非常尴尬。相反，将操作放入其自己的函数中，然后将该函数设置为一个时间间隔：

function update() {

    $(".database").each(function () {

        var self = this;

        var i = 0;

        $.ajax({

            url: "/show",

            method: 'GET',

            cache: false,

            success: function (data) {

                $(self).html(data);

                console.log(data);

            }

        });

    });

}

setInterval(update, 10000);

这样，update每 10 秒的每次调用都会调用一次新的调用，每次调用.each()都会依次设置为目标元素。self