Question

我有一个简单的php / mysql应用程序，可以查询来自数据库的大量员工信息（只有5列：employee_id，first_name，last_name，x_coord，y_coord），就像这样......

$sql = "SELECT * FROM employees";
        $getemployees = mysqli_query($connection, $sql);
        if (!$getemployees) {
        die("Database query failed: " . mysqli_error($connection));
        } else {
        while ($row = mysqli_fetch_array($getemployees)) {
            $output.="<div class='employee' style='top: " . $row['x_coord'] . "px; left: " . $row['y_coord']. "px;'>". $row['first_name'] . " " . $row['last_name'] . "</div>";
        }
        }

我也有这个代码使名称可拖动，并在释放可拖动项目后用新的顶部/左侧位置更新我的数据库......

 <script>
  $( function() {

    $('.employee').draggable({
        stop: function(event, ui) {
            var left = $(this).position().left;
            var top = $(this).position().top;
            alert(left + " " + top);   //just for testing

           //Make ajax call here:
            $.ajax({
                  url: 'update-db.php',
                  type: 'POST',
                  data: {leftPosition: left, topPosition: top },   
                  success: function() { console.log('OK'); },
                  error: function() { console.log('Fail!'); }
             });
        }
    }).resizable({
        stop:function(event,ui){}
    })
  } );


  </script>

这一切都很好，但我现在意识到我需要传递＆＃34; employee_id＆＃34;同样，为了正确更新数据库。那么如何将employee_id传递给AJAX（以及top和left变量）？

显然，当我在这篇文章顶部的第一段代码中查询数据库时，我需要＆＃34;把＆＃34; employee_id（即$ row [＆＃39; employee_id＆＃39;]）某处，以便所有可拖动的div也具有相应的employee_id信息。然后需要得到＆＃34; employee_id＆＃34; （仅我拖动的项目）进入＆＃34;数据＆＃34; AJAX电话的区域。

最好的方法是什么？我很清楚如何获得通过AJAX调用传递的特定employee_id。任何帮助/方向将不胜感激。

Answer 1

您可以使用.employee类中的隐藏输入字段来执行此操作。

<input type="hidden" class="employee_id" value="<?php echo $row['employee_id'];?>" name="id" />

现在，您可以轻松地从下面的ajax中获取此ID。

$('.employee').draggable({
    var id=$(this).find("input.employee_id").val();
    ....

因此，您的最终代码如下，

 $sql = "SELECT * FROM employees";
            $getemployees = mysqli_query($connection, $sql);
            if (!$getemployees) {
            die("Database query failed: " . mysqli_error($connection));
            } else {
                while ($row = mysqli_fetch_array($getemployees)) {
                    $output.="<div class='employee' style='top: " . $row['x_coord'] . "px; left: " . $row['y_coord']. "px;'>";
                    $output.="<input type='hidden' class='employee_id' value='" . $row['employee_id'] . "' />";    //Hidden input field is added containing employee Id.
                    $output.= $row['first_name'] . " " . $row['last_name'];
                    $output.="</div>";
                }
            }

Ajax代码将是，

<script>
  $( function() {

    $('.employee').draggable({

        var id=$(this).find('input.employee_id').val();   // this grabs the id of employee

        stop: function(event, ui) {
            var left = $(this).position().left;
            var top = $(this).position().top;
            alert(left + " " + top);   //just for testing

           //Make ajax call here:
            $.ajax({
                  url: 'update-db.php',
                  type: 'POST',
                  data: {leftPosition: left, topPosition: top, employee_id: id },   // passed id parameter to php script along with others.
                  success: function() { console.log('OK'); },
                  error: function() { console.log('Fail!'); }
             });
        }
    }).resizable({
        stop:function(event,ui){}
    })
  } );


  </script>

Answer 2

我不知道如何调用包含数据库中员工ID的列，但我会假设这个答案称为while ($row = mysqli_fetch_array($getemployees)) { $output.="<div class='employee' data-id='".$row['employee_id']."' style='top: " . $row['x_coord'] . "px; left: " . $row['y_coord']. "px;'>". $row['first_name'] . " " . $row['last_name'] . "</div>"; }。现在更新您的PHP代码，以便将员工ID传输到DOM并使用JavaScript访问它：

data-id

现在可以通过类employee的div的// ... data: {leftPosition: left, topPosition: top, employeeId: $(".employee").data("id") } // ...属性访问员工ID。您现在可以从JavaScript访问它：

<div>

Answer 3

您只需将其添加到数据中即可。

$.ajax({
              url: 'update-db.php',
              type: 'POST',
              data: {leftPosition: left, topPosition: top,   employeeid:employeeid },   
              success: function() { console.log('OK'); },
              error: function() { console.log('Fail!'); }
         });

然后应该在脚本中的某个位置填充employeeid变量（基于您访问特定行的位置）。您可以考虑使用拖动元素的属性，然后使用 $（本）.attr（）

Answer 4

如果您需要发送ID列表，可以使用以下内容。我假设员工ID列表是一个数组对象。

var jsonids = JSON.stringify(employee_ids);
$.ajax({
          url: 'update-db.php',
          type: 'POST',
          data: {leftPosition: left, topPosition: top, employeeids:  jsonids},   
          success: function() { console.log('OK'); },
          error: function() { console.log('Fail!'); }
});

如何通过AJAX调用获取特定的PHP变量？

4 个答案: