Php - Ajax：通过单击链接显示来自 while 循环的特定行信息答案

【问题标题】：Php - Ajax : Display a specific row information from a while loop by clicking on a linkPhp - Ajax：通过单击链接显示来自 while 循环的特定行信息
【发布时间】：2017-04-07 18:51:15
【问题描述】：

我正在处理一个用户已连接并可以查看他自己的交货单列表的项目。使用 while 循环显示传递列表。单击列表中某个项目的详细信息按钮时，我需要使用他的 id（基本上是行 id 的内容）从循环中显示该项目的详细信息。我总是得到一个空的细节......并且不明白，因为它适用于我的 ajax 请求中的硬编码 id

这是我的 index.php 文件

    <?php
     include('config.php');
    // if connection to db ok,continue
   // We prepare the request that join the table users and delivrey based on the user id
    $reqdelivery = $bdd->prepare("SELECT users.id, livraisons.id, livraisons.user_id, livraisons.delivery_date, livraisons.recipient_address, livraisons.recipient_name
                        FROM livraisons
                        INNER JOIN users
                        ON users.id = user_id
                        WHERE users.id = ?
                        ORDER BY delivery_date");
    $reqdelivery->execute(array($_SESSION['id']));


    while ($donnees = $reqdelivery->fetch())
    {      

    ?>    
    // Add data to every field of the page
   <tr class="delivery_board_menu_data">
    <td class="delivery_board_menu_data_date"><?php echo $donnees['delivery_date']; ?></td>
    <td class="delivery_board_menu_data_recipient"><?php echo $donnees['recipient_name']; ?></td>
    <td class="delivery_board_menu_data_address"><?php echo $donnees['recipient_address']; ?></td>
    <td class="delivery_board_menu_data_type">Express</td>
    <td class="delivery_board_menu_data_price">1</td>

    // More button that display the box option using JQuery
    <td class="delivery_board_menu_data_more"><a href="#" class="data_more_informations">More</a></td>


    <!-- Div with box option content -->
    <td class="div_data_more_informations">
         <ul>
            //Detail button that display the details page
            <li><a href="details.php?id=<?php echo $donnees['id']; ?>" class="div_data_more_informations_details">Détails</a></li>
            <li><a href="#" class="div_data_more_informations_cancel">Annuler</a></li>
         </ul>
    </td>
    <!-- End Div avec contenu de la box option -->
 </tr>

 <?php
 }

 // We finish the request when all all table has been check
 $reqdelivery->closeCursor();
 ?>



<!-- Start Slide menu details/livraison -->
// Include the details.php sheet
<div id="container-details">
<?php include ('details.php') ;?>
</div>
<!-- End Slide menu details/livraison -->

我的 details.php 文件

<?php

 include('config.php'); 
// prepare the request that display the delivery details thanks to the delivery id

$result = $bdd->prepare("SELECT * FROM livraisons WHERE id = ?");
$result->execute(array($_GET['id']));  

// While loop to check all the data
while ($donnees_details = $result->fetch())
{                                        
?> 

<!-- Start Slide menu details/livraison -->
<div class="container-details_header">
   <span id="close"></span>

   // display the data from the db row
   <p class="container-details_header_date">Livraison le <?php echo $donnees_details['delivery_date']; ?></p>
   <p class="container-details_header_type">Tournée</p>
</div>

<!-- Start détails de la livraison -->
   <div class="container-details_body">
   <!-- Start détails de la livraison INFOS -->
   <div class="container-details_body_infos">
       <p class="container-details_body_infos_title">Infos</p>
       <p class="container-details_body_infos_time"><span><?php echo $donnees_details['delivery_time']; ?></span> Heure de début</p>
       <p class="container-details_body_infos_volume"><span><?php echo $donnees_details['delivery_volume']; ?></span> Caisse de mesure</p>
      <div class="container-details_body_infos_separator"></div>
  </div>
  <!-- End détails de la livraison INFOS -->
</div>
<!-- End Slide menu details/livraison -->


 <?php
  }
  // Close the cursor
 $reqdelivery->closeCursor();
 ?>

我的 Ajax 脚本

   $.ajax({
     url: 'details.php',
     type : 'GET',
     data : 'id=' + id,
     dataType : 'html',

     success: function(data) {

         //#countainer-details open the delivery details panel using JQuery
         $('#container-details').html(data);

     }
});

【问题讨论】：

你能展示更多的 Ajax 脚本吗？你如何填充id 变量？
这都是我的 Ajax 脚本。我真的是ajax的新手。 id 是您通过单击获得的 ID：
详细信息

【解决方案1】：

您可以采取的一种方法是观察链接上的 click 事件，解析 id，然后拨打您的 ajax 电话。

类似于以下内容：

为您的链接添加一个 data-id 属性：

<td class="div_data_more_informations">
     <ul>
        //Detail button that display the details page
        <li><a data-id="<?php echo $donnees['id'] ?>" href="#">Details</a></li>
     </ul>
</td>

Ajax 脚本：

<script>
  //Get all your links
  var links = $(".div_data_more_informations ul li a");

  //Loop through links and add on click listeners
  links.each(function(){
     var link = $(this);
     var id = link.data('id');

     link.click(function(){
          $.ajax({
            url: 'details.php',
            type : 'GET',
            data : 'id=' + id,
            dataType : 'html',
            success: function(data) {
               $('#container-details').html(data);
            }

       //prevent the link from refreshing page
       return false;
     });
  });

</script>

有关click 事件的更多信息：https://api.jquery.com/click/ 和each 函数：https://api.jquery.com/each/

您还可以使用.get 方法而不是$.ajax 调用来简化代码：https://api.jquery.com/jquery.get/

$.get('details.php', { "id" : id }, function(data){
    $('#container-details').html(data);
})

【讨论】：