javascript - 拖放表格单元格并使用 ajax 更新数据库

Question

长话短说，我正在使用 php 制作游戏。不幸的是我已经停下来了。我正在尝试使用 JavaScript/Ajax 和 MySql 数据库制作交互式库存。视觉部分将是基于经典 RPG 网格的库存(6x10)。

我的目标是用户可以将项目从一个方 block 拖放到另一个方 block ，如果另一个方 block 被占用，则切换位置。我想使用 ajax 更新每个操作的数据库，这样页面就不会刷新。

我已经构建了数据库，因此它包含 60 个槽(0-59)，每个槽包含一个 ID。这个想法是ajax调用移动槽的内容。 (请参阅此处的 sql 文件: Download link to sql file )

我制作了一个 php 脚本，它创建一个 html 表(6x10)并分配一个等于数据库列名称的 id。(php 代码)

<?php
    $conn = new mysqli("localhost", "game", "password", "game");

    $sql = "select * FROM inventory where UserID = '1'";
    $query  = $conn->query($sql) or die ($conn->error);
    $fetch = $query->fetch_object();

    $lineCount = 0;
?>

<style>
    td, th {
        border: 1px solid #999;
        padding: 0.5rem;
        min-height:20px;
        min-width:20px;
        text-align:center;
    }
</style>

<table>
    <?php
        for($i=0; $i <= 59; $i++){
            if($lineCount == 0){
               echo "<tr>";
               echo "<td id='slot_".$i."'>".$fetch->{"slot_".$i}."</td>";
               $lineCount++;
            }elseif($lineCount==9){
               echo "<td id='slot_".$i."'>".$fetch->{"slot_".$i}."</td>";
               echo "</tr>";
               $lineCount=0;
            }else{
               echo "<td id='slot_".$i."'>".$fetch->{"slot_".$i}."</td>";
               $lineCount++;
            }
        }
    ?>
</table>

html 截图:

(这些数字是数据库中的值。)

我已经尝试让它工作好几天了，但没有运气。我已经接近使用这个(链接:redips example page)。使用选项:切换内容。

问题:我目前的 JavaScript 很糟糕:)我无法让该功能正常工作。我面临的最大问题是javaScript的拖放和切换部分。我也无法了解如何使用 ajax 即时更新数据库。

我什至不确定这是否可能成为共谋，但我很乐意得到你的帮助。

Answer 1

我必须更多地了解您面临的问题:问题是什么时候发生的？您是否尝试过对查询进行 var_dump？等等:

$query  = $conn->query($sql) or die var_dump($conn->error);

只是为了了解正在发生的事情......:)

除此之外，我可以看出您还没有使用循环来创建表。您必须创建一个 for 循环来创建一行，并在其中创建一个 for 循环来为该行创建单元格。这有道理吗？