javascript - mysql循环 - 预加载数据？

Question

我正在制作一个拖放页面，其中包含由 sql 表填充的内容的可拖动框。一旦一个盒子被拖走，它就会消失，一个带有新数据的新盒子出现。

我只想在任何时候出现 15 个框，但我不确定如何使用 SQL 执行此操作，因为框的拖放是在加载后发生的，因此 php 无法帮助我 - 做我需要在页面加载之前将框名称列表预加载到 js 数组中吗？这是否意味着我的整个列表都会公开给公众？

我已经使用 xml 表编写了这个，我正在迁移到 sql。这是我编写的函数，每次发生 JQuery 放置事件时都会调用它:

function AddNextSkill() {

var div = document.getElementById('productbox');
div.innerHTML = div.innerHTML + '<div class="product" id= "box' + RunningCount +' "><h4>' + MyToolList[RunningCount][1] + "</h4></div>";
RunningCount += 1;
$("#productbox .product").draggable({//JQUERY DETAILS//}
});

在这种情况下，我在 JS MyToolList[i][j] 中创建了一个预加载数组，其中包含工具列表及其 ID。

这是一种低效的方法吗？使用 sql 而不预加载任何表会更好吗？

Answer 1

我通过执行以下操作解决了这个问题:

我创建了一个 AJAX 调用，它只返回表中的下一行(带有

LIMIT $_GET[rownum], 1 

在 SQL 查询结束时调用。然后，每次发生放置事件时，我都会调用此 AJAX 调用。唯一的技巧是您必须将新框重新设置为可放置。

function AddNewRow() {
    var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var div = document.getElementById('productbox');
            div.innerHTML = div.innerHTML + xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "AddNewTool.php?rownum=" + RunningCount, true);
    xmlhttp.send();

   $("#productbox .product").draggable({//JQUERY DETAILS//}
   });