javascript - AJAX 仅返回最后一个数组项

Question

我想创建异步 AJAX 查询来在网页完成加载时检查服务器状态。不幸的是，当涉及到处理后的 PHP 数据显示时，我只收到单个值。

JS:

<script>

  window.onload = function() {
      test();
    };

  function test()
  {
      var h = [];

      $(".hash td").each(function(){

        var hash = $(this).closest('#h').text();

        if (hash) {
            $.ajax({
                url: 'stat.php',
                method: 'POST',
                async: true,
                data: {hs: JSON.stringify(hash)},
                success: function(data) {
                    $('.result').replaceWith(data);
                }
            });
        }
      });
    }
</script>

PHP:

<?php

require_once ('inc/config.php');
require_once ('inc/libs/functions.php');

if (isset($_POST['hs'])) {

  $hash = json_decode($_POST['hs']);

  serverstatus($hash);
}

function serverstatus($hash) {

    $address = DB::queryFirstRow("SELECT address,hash FROM servers WHERE hash=%s", $hash);

    $address_exploded = explode(":", $address['address']);
    $ip = $address_exploded[0];
    $port = $address_exploded[1];

    $status = isServerOnline($ip,$port);

    if ($status) {
      $s = "Online $ip";
    } else {
      $s = "Offline";
    }
    echo $s;
}

?>

我将 PHP 的结果嵌入到表行中。我看到 AJAX 迭代数组，但所有行都收到相同的值(数组中最后检查的元素)。

Answer 1

$('.result') 匹配具有 result 类的所有元素。然后，replaceWith 会将它们替换为您提供的内容。

如果您只想影响某些结构中的 .result 元素(也许是同一行？)，则需要使用 find 或类似的:

function test()
{
    var h = [];

    $(".hash td").each(function(){
        var td = $(this);                              // <====
        var hash = td.closest('#h').text();
        var result = td.closest("tr").find(".result"); // <====

        if (hash) {
            $.ajax({
                url: 'stat.php',
                method: 'POST',
                async: true,
                data: {hs: JSON.stringify(hash)},
                success: function(data) {
                    result.replaceWith(data);          // <====
                }
            });
        }
    });
}

显然

var result = td.closest("tr").find(".result"); // <====

...需要调整为您真正想要的样子，但这就是想法。

<小时/>

您问题中的这一行暗示了一种反模式:

var hash = $(this).closest('#h').text();

id 值必须在文档中是唯一的，因此您永远不需要找到与任何给定元素“最接近”的值。如果 DOM 中有多个 id="h" 元素，请将其更改为使用 class 或 data-* 属性。