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的一部分，那么你将不得不

几乎忘记了您的PHP代码
使用以下代码实现对url的请求

$.ajax({ url: "https://www.toontownrewritten.com/api/invasions", }) .done(function( data ) { if ( console && console.log ) { console.log( data ); } });
制作一个JS代码，将上一节中的data转换为可读的html并在您的网页上显示。它应该在console.log(data)所在的块中实现。
将该部分代码放入setInterval

setInterval(function(){ //$.ajax(); }, 10000);
请注意，如果你的请求在这个时间间隔内没有完成，你会下地狱。见this。

Answer 2

您的问题是无法理解AJAX。以下是$.post()示例。

首先让我们创建您希望客户端（浏览器用户）看到的页面：

viewed.php

<?php
$out = '';
// you could even do your initial query here, but don't have to
?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'whatever.css';
    </style>
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='whatever.js'></script>
  </head>
<body>
  <div id='output'><?php /* if initial query took place */ echo $out; ?></div>
</body>
</html>

现在您需要whatever.js中的JavaScript。

$(function(){
function getData(){
  $.post('whatever.php', function(data){
    // var htm = do a bunch of stuff with the data Object, creating HTML
    $('#output').html(htm);
  });
}
getData(); // don't need if PHP query takes place on original page load
setInterval(getData, 10000); // query every 10 seconds
});

在whatever.php：

<?php
// $assocArray = run database queries so you can create an Associative Array that can be converted to JSON
echo json_encode($assocArray);
?>

PHP生成的JSON出现在data参数中，回到创建PHP请求的JavaScript中：

$.post('whatever.php', function(data){

Answer 3

我有更好的建议，再次与使用setInterval相同。

setInterval(function () {
    if (isActive) return; // so that if any active ajax call is happening, don't go for one more ajax call
    isActive = true;

    try {
        $.ajax("URL", params,function() { isActive = false;//successcallback }, function () {
            isActive = false; // error callback
        });
    } catch (ex) { isActive = false;}
}, 10000);

使用AJAX自动更新

3 个答案: