Javascript Php-Ajax：通过单击链接显示while循环中的特定行信息

我正在做一个项目，在这个项目中，用户可以连接并查看自己的交货订单列表。 使用while循环显示交付列表。 单击列表中某个项目的details按钮时，我需要使用他的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 -->

<?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();
 ?>

---

您可以采取的一种方法是观察链接上的

click

事件，解析id，然后进行

ajax

调用

如下所示：

向链接添加数据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脚本吗？如何填充

id

变量？这都是我的Ajax脚本。我对阿贾克斯很陌生。该id是您通过单击获得的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>

<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>

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