Ping 服务器 + 进度条然后显示不同的 div

Question

所以基本上我使用的是 Bootstrap 3 RC2。我希望能够通过 PHP ping 服务器。我在谷歌上找到了这个脚本。

<?php
// Script by Akensai

if (!$socket = @fsockopen("YOUR.IP.HERE", 80, $errno, $errstr, 30))
{
  echo "<font color='red'><strong>Offline!</strong></font>";
}
else 
{
  echo "<font color='green'><strong>Online!/strong></font>";


  fclose($socket);
}

?>

我知道我可以将在线/离线回显更改为引导元素，例如 100% 进度条。

我想知道的是如何在 ping 服务器时使进度条从 0%-100% 变为 0%-100%。默认情况下，加载时进度条为蓝色，成功则变为绿色，失败则变为红色。 Bootstrap 只需更改进度条 DIV 中的类即可提供这些选项。

我知道这似乎不切实际，因为 ping 通常非常快，但我仍然想知道如何使用该功能以供将来参考。

有什么建议吗？

Answer 1

我将向您展示它是如何仅使用 jquery 完成的，我没有使用太多引导程序。

首先让我们假设我们有与您所做的类似的服务器代码。

$json = array();
if ($socket = fsockopen($_POST['ip'], 80, $errno, $errstr, 30)) {
   $json = array('status' => 1);
   fclose($socket);
} else {
   $json = array('status' => 0);
}

header("Content-Type: application/json");
echo json_encode($json);

我们有一个服务器脚本，我们可以从客户端调用它，它会返回一个 json 响应。

在 html 端，我们有以下进度条。

<progress id='progress' max=100></progress>

然后我们有以下 jquery 代码调用我们的脚本

$(function () {
    var options = {
         url: '/script.php',
         data: { ip : '127.0.0.1' },
         type: 'POST',
        dataType: 'json',
        success: function (json) {
           if (json.status  == 1) $("#progress").val($('#progress').val() + 10);
        }
    };
    $.ajax(options);
});

您需要使用setInterval 或其他排队方法进行此 ajax 调用，以便在 ping 完成之前执行 ping 操作。 请注意，我从您的fsockopen 中删除了@，这是一种不好的做法。 Read