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

Question

我正在一个项目上，在该项目中用户已连接并且可以看到他自己的交货订单列表。 使用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);

     }
});

Answer 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);
})