使用 AJAX 自动更新答案

【问题标题】：Automatically update with AJAX使用 AJAX 自动更新
【发布时间】：2014-12-01 10:59:28
【问题描述】：

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

<?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 更新一次。目前，我有它，所以用户必须手动刷新。任何帮助表示赞赏！

【问题讨论】：

为什么不使用setinterval？
我尝试使用它，但我不确定如何使用它。我从来没有使用过 AJAX。如果我确实开始使用它，它可能会让事情变得容易得多。 @洗发水
ajax 不是武器它只是一段代码，用户如何手动刷新页面？有链接吗？
@shampoo，setInterval 是邪恶的，使用setTimeout。
@shampoo 是的，目前有一个链接供用户手动刷新页面。我宁愿让它自动刷新此代码本身而不是整个页面（并且通常摆脱手动刷新）。我不知道我在用 ajax 做什么。

标签： javascript php jquery ajax setinterval

【解决方案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。

【讨论】：

是否有关于如何将数据转换为 JS 可读 html 的教程？这里的一位用户帮助我编写了这个 php 代码，它适用于手动刷新。我想使用 AJAX。
你知道console和console.log吗？如果没有右键单击并在 chrome 中选择 inspect element，将为您提供一个可以动态测试 js 代码的环境（谷歌了解更多信息）。用console.log可以看到你得到的是什么类型，数据就是这样获取的。要使其对用户可见，您需要 jquery append 或 html 尝试 google，漂亮的 jquery 站点将显示出色的文档和示例。

【解决方案2】：

我有个更好的建议，和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);

【讨论】：

【解决方案3】：

您的问题是无法理解 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){

【讨论】：

如果它没有在 10 秒内响应，或者仅仅是 API 需要更多时间来评估？
我要为//$.ajax(); 写什么？我是否将我包含的 PHP 代码放入其中？
你的整个方法都是错误的。通常，在使用 AJAX 时，您会在单独的 PHP 页面上进行数据库查询，而不是保存 JavaScript 的页面。您在使用 AJAX 时引用的 url 是 PHP 页面应该驻留的位置。您使用 PHP 执行所有数据库查询，然后使用echo json_encode($assocArray);。这些 JSON 结果在success 上发送回AJAX。注意：有许多 AJAX 方法。
@PHPglue 我试过这个，但它不起作用。 <script type="text/javascript"> $(document).ready(function(){ refreshInvasions(); }); function refreshInvasions(){ $('#refreshinvs').load('ttr-invasions.php', function(){ setTimeout(refreshInvasions, 10000); }); } </script> 我将我的 PHP 代码包装在 <div id=refreshinvs> 中。 ttr-invasions.php 是单独的文件。
不，你不想生成新的负载，除非你不介意可能的闪存，无论如何。我可能需要一秒钟才能给你一个更长的答案。等等。