javascript - 使用 AJAX 自动更新

Question

我目前在我的网页上使用此代码:

<?php
$url = "https://www.toontownrewritten.com/api/invasions";
$data = json_decode(file_get_contents($url));

if (!empty($data->invasions)) {
    echo "<h1 style='text-align:center;margin:auto;padding:2px;font-size:16px;font-weight:bold;text-decoration:underline;padding:2px;'>Invasion Tracker</h1>";
    $i = 0;
    foreach($data->invasions as $title => $inv) {
        print "<h3 style='text-align:center;margin:auto;'><b>District:</b> {$title}

            </h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> {$inv->type}

            </h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> {$inv->progress}

            </h3>";

        if (count(($data->invasions) > 1)) {

            if (end($data->invasions) !== $inv) {
                print "<hr>";
            } else {
                print "<br style='font-size:2px;'>";
            }

        }

    }

} else {
    echo "<h1 style='text-align:center;margin:auto;padding:2px;color:darkred;font-weight:bold;'>No invasions!</span>";
}

?>

我希望通过 AJAX 使其每 10 秒刷新一次。但是，我一直在阅读您需要创建一个函数，但我不确定如何使用 API 来实现？每 10 秒，该 API 就会更新一次，这就是为什么我希望每 10 秒用 AJAX 更新一次。目前，我有它，所以用户必须手动刷新。感谢您的帮助!

Answer 1

您可以使用建议的方法简单地重新加载页面 here

但是如果你想要一个 AJAX 实现，它只是引用你的 html 的一部分，那么你将不得不

1. 差点忘记您的 PHP 代码

2. 使用以下代码实现对url的请求

   $.ajax({
网址:“https://www.toontownrewritten.com/api/invasions”，
})
.done(函数(数据){
如果(控制台 && 控制台.log){
控制台日志(数据)；
}
});

3. 编写一个JS 代码，将上一节中获取的数据 转换为可读的html 并将其显示在您的页面上。它应该在 console.log(data) 所在的 block 中实现。

4. 将那部分代码放在一个 setInterval 中

   setInterval(函数(){
//$.ajax();
}, 10000);

5. 请注意，如果您的请求未在此间隔内完成，您将会下 hell 。见this .