Question

我有以下文件

的index.html

<div><ul></ul></div>
<button>Click me</button>

main.js

$.ajax({
   type: 'POST',
   url: 'get_db.php',
   data: {name: 'users'},
   success: function(result) {
      $(result).hide().appendTo('div ul').fadeIn(1000);
   }
});

get_db.php

include('db_connect.php');
$db_name = $_POST['name'];
$query   = "SELECT * FROM ".$db_name;

if($result = $conn->query($query)) {
    while($row = $result->fetch_assoc()) {
          $content .= "<li>".$row['id']." ".$row['name']."</li>";
          echo $content;
    }
}

问题是：

如何逐一获得结果并附加到＆＃39; div ul＆＃39;？

在我的情况下，所有结果都会立即出现。

Answer 1

您可以迭代响应中的<li>个元素，并一次追加每个元素

$.ajax({
   type : 'POST',
   url  : 'get_db.php',
   data : {name: 'users'}
}).done(function(result) {

    $(result).each(function(index, li) {

        setTimeout(function() {
            $(li).hide().appendTo('div ul').fadeIn(1000);
        }, index * 300);

    });

});

Answer 2

在get_db.php中，您可以返回一个包含行和数据的JSON数组，而不是返回一个HTML字符串，然后将其附加到'div ul'。然后在main.js中迭代JSON数组，构建HTML片段并逐个添加它们。这也会减少AJAX响应的大小，并允许您根据需要以其他方式使用该数据。

Answer 3

创建一个启动ajax请求的函数，并在ajax进程完成后再次调用相同的函数

function ajaxload(){
 $.ajax({
   type: 'POST',
   url: 'get_db.php',
   data: {name: 'users'},
   success: function(result) {
      $(result).hide().appendTo('div ul').fadeIn(1000);
       ajaxload();
   }
 });
}

注意：我只是不知道你何时或如何阻止它，因为它的基础已经根据你的要求:) 也许你可以从ajax请求中获取一个返回值，并在客户端读取它将触发进程的暂停。

Answer 4

如果您没有超过10万的更大数据表，那么我会说所有

标签样式显示一次获取所有数据：＆＃39;无＆＃ 39;而不是在那之后逐渐消失。

从Ajax请求中逐个获取结果