如何讓一個特定的PHP變量通過AJAX調用發送？

Question

我有一個簡單的PHP/MySQL的應用程序，從數據庫（只有5列：EMPLOYEE_ID，名字，姓氏，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> 

這一切工作正常，但現在我意識到我需要通過「 employee_id「，以便正確更新數據庫。那麼我怎樣才能將employee_id傳遞給AJAX（以及左和右變量）呢？顯然，當我在這篇文章頂部的代碼的第一個代碼段中查詢數據庫時，我需要將employee_id（即$ row ['employee_id']）「放」到某處，以便所有可拖動的div也可以有相應的employee_id信息。然後需要將「employee_id」（僅限我剛剛拖動的項目）放入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

您可以將其添加到數據。

$.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變量應該填充在腳本的某處（根據您訪問特定行的位置）。您可以考慮使用拖動元素的屬性，然後使用 $（this）.attr（）

Answer 3

我不知道你怎麼稱呼包含員工ID列在數據庫中，但我會爲這個答案假設它被稱爲employee_id。現在，升級你的PHP代碼，以便爲員工ID轉移到DOM和JavaScript的訪問：

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>"; 
     } 

現在員工ID是通過DIV的一類的employee的data-id屬性訪問。 現在，您可以從JavaScript訪問它：

// ... 
data: {leftPosition: left, topPosition: top, employeeId: $(".employee").data("id") } 
// ... 

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!'); } 
});