jQuery + PHP + MySQL：用 2 个表格拖动 'n' Drop

Question

重点：

我有两张并排的桌子。 一个是填充数据（在这种情况下，一个表格填充了团队中所有工作人员的姓名）。 另一个是空的。现在，我想将名称（行）拖放到另一个表中，在放置上，它会触发对数据库的插入-查询。

此外，第一个表中的名称（填充了数据）始终保持不变（因为名称列表永远不会改变）。

所以，一个小计划：

1. 用来自数据库的数据填充的表（拖动）

2. 空表（drop）

一个名字被从第一个表拖到第二个，当被删除时，一个插入查询被发送到数据库。刷新页面时，仍会在第二个表中看到删除的名称。

哦，还有一个可以选择实现的功能：如果我将第二个表中的名称拖回第一个表，该名称应该会消失（因此会从数据库中的表中删除记录）。拖放应该可以双向使用。

我已经拥有的代码，但不知何故无法正常工作：

            $(document).ready(function() {
                var $tabs = $('#EmptyTable')
                $("tbody.t_sortable").sortable({
                    connectWith: ".t_sortable",
                    items: "> tr:not(:first)",
                    appendTo: $tabs,
                    helper:"clone",
                    zIndex: 999990
                }).disableSelection();

                var $tab_items = $(".nav-tabs > li", $tabs).droppable({
                    accept: ".t_sortable tr",
                    hoverClass: "ui-state-hover",
                    drop: function( event, ui ) { 
                <?
                  mysql_query("INSERT INTO emptyTable_team (name) values (<datafromfirsttable>)");
?>
             return false; 
                    }
                });
            });

Answer 1

您不能将 PHP 函数插入 Javascript。

PHP 是一种脚本语言，它告诉您的网络服务器如何处理请求，例如更新数据库或呈现 HTML。但是一旦处理了请求，PHP 脚本就会停止，所有变量都会被卸载，等等。

您在 PHP 中编写的脚本是告诉 Apache 在页面加载时运行该查询一次。

您要做的是在 drop 函数中调用 $.ajax。 jQuery 的 ajax 函数可以将数据 POST 到一个 url，此时您通过将数据插入数据库来处理请求。

Javascript：

$(document).ready(function() {
  var $tabs = $('#EmptyTable');
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
      var rowData;
      // looping through the cell of each row
      for (var i = 0; i < $("td",this).length; i++) {
        // Get the name of the column
        // I don't know your HTML so I can't make a selector for this
        var colName = $("selector-for-header-column").text(); 
        // Using square brackets to access an object property by string variable, 
        // and selecting the text in this cell for the dropped row.
        rowData[colName] = $("td",this).eq(i).text(); 
      }
      // Now we have an object whose property names are the table headers, 
      // and the data in each property is the text in each cell of the dropped row.
      $.ajax({
        type: "POST",
        url: "/insertTeamMember.php",
        data: rowData,
        success: function (data) {
          // Log the return from the ajax endpoint, this will help you debug!
          console.log(data);
        }
      });
    }
  });
});

插入TeamMember.php：

<?PHP
$dbcO = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$q = "INSERT INTO emptyTable_team (name) values ( ? )";
$stmt = $dbcO->stmt_init();
$stmt->prepare($q);
$stmt->bind_param('s', $_POST['name']);
$stmt->execute();
$stmt->close();
?>

我使用prepared statement 作为防止mysql 注入的简单方法。强烈建议不要将用户输入直接插入到查询字符串中。用户输入是来自客户端的所有数据。