javascript - 如何让 PHP shuffle 结果在整个 shuffle 过程中一次显示一个

Question

假设我的数据库中有 10 个项目正在尝试洗牌，我如何更改当前的代码，以便每次从数据库中提取一个名称时，一次显示一个名称，而不是全部显示一次？

$con = mysqli_connect("XXX", "XXX", "XXX", "XXX");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");

echo 'Normal results: <br>';
$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    $array[] = $row;
    echo $row['firstname'] . ' ' . $row['lastname'] . '<br>';
}
?>
<form method="post">
    <input type="submit" value="Shuffle" name="shuffle">
</form>
<?php
if (isset($_POST['shuffle'])) {
    shuffle($array);
    echo 'Shuffled results: <br>';
    foreach ($array as $result) {
    $shuffle_firstname = $result['firstname'];
    $shuffle_lastname = $result['lastname'];
?>

<div id="shuffle_results">
        <?php echo $shuffle_firstname . ' ' . $shuffle_lastname . '<br>';?>
</div>
 <?php   }
}

//我添加的内容，这也是我添加的位置

$get_shuffle = array($array);
$shuffle_one = array_pop($get_shuffle);
print_r($get_shuffle);
?>

我希望他们在展示后都留在原地。我只是希望他们一次只出现一个。比如说，一个袋子里有10张纸，你一次画一张，然后将这些纸放在 table 上以显示所画的内容，这就是我想要的。

Answer 1

作为我建议您使用 JavaScript 而不是 PHP 来制作动画的评论的后续内容，这里有一个基本的方法。 (此代码假设页面上有 jQuery)。

注意:我还没有测试过这段代码，可能有一两个错误，但我希望您能了解总体思路。

您的 HTML

<div id="shuffle_results"></div>
<form onsubmit="getData()">
    <input type="submit" value="Shuffle" name="shuffle">
</form>

你的PHP

$con = mysqli_connect("localhost", "root", "", "db");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");

$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    array_push($array, $row);
}

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

你的 JavaScript

function getData() {
  $.ajax({
    url: 'url to PHP script',
    dataType: 'json',
    success: function(data) {
      for(var i = 0, l = data.length; i < l; ++i) {
        window.setTimeout(addResult, 2000, data[i].firstname, data[i].lastname);
      }
    },
    error: function(jqXHR, textStatus, error) {
      alert('Connection to script failed.\n\n' + textStatus + '\n\n' + error);
    }
  });
}

function addResult(firstname, lastname) {
  $('#shuffle_results').append("<p>" + firstname + " " + lastname + "</p>");
}

这里的基本思想是你不应该使用 PHP 来进行 DOM 操作。 PHP 可以将数据加载到您的网页中(该数据可以是 DOM 元素、我所展示的 JSON 数据或其他类型的数据)，但一旦加载，就应该使用 JavaScript 与其进行交互。回想一下，PHP 在您的服务器上运行，而 JavaScript(传统上)在客户端的 Web 浏览器中运行。