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

Posted 2023-02-24

【中文标题】如何获取特定的 PHP 变量以通过 AJAX 调用发送？

【英文标题】：How to get a specific PHP variable to send with an AJAX call?

【发布时间】：2017-07-24 15:31:41

【问题描述】：

我有一个简单的 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>

这一切都很好，但我现在意识到我还需要传递“employee_id”，以便正确更新数据库。那么如何将employee_id 传递给AJAX（连同top 和left 变量）？

显然，当我在这篇文章顶部的代码的第一个 sn-p 中查询 db 时，我需要将employee_id（即$row['employee_id']）“放置”到某处，以便所有可拖动的div也有相应的employee_id 信息。然后需要将“employee_id”（仅属于我刚刚拖动的项目）放入 AJAX 调用的“数据”区域。

最好的方法是什么？我显然对如何通过 AJAX 调用仅获取特定的employee_id 感到困惑。任何帮助/指导将不胜感激。

【参考方案1】：

您可以将其添加到数据中。

$.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()

【参考方案2】：

您可以使用 .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>

【参考方案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>";
        

现在可以通过类为employee 的div 的data-id 属性访问员工ID。 您现在可以从 JavaScript 访问它：

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

【参考方案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!'); 
);