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-*属性。

Answer 2

谢谢大家的帮助。我的最后一个，显然很脏但是可以正常工作的代码：

function testServerPage()
{
    var h = [];

    $(".hash li").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) {
                  $('#' + hash).replaceWith(data);
              }
          });
      }
    });
    return false;
}

我刚刚将动态变量添加到元素：

success: function(data) {
                      $('#' + hash).replaceWith(data);
                  }

AJAX仅返回最后一个数组项

2 个答案: