通過javascript代碼發送php變量onclick

Question

我有一個表格，其中當我點擊顯示按鈕時，彈出一個窗口打開。直到現在，一切都很好。

但點擊後顯示按鈕，我也想送PHP變量在彈出的窗口，想顯示與該變量的值。如何可能？

我的表是低於

<table align="center"> 
    <?php 
     include("connection.php"); 
     $query1=mysql_query("select * from career") or die(mysql_error()); 
     while($row1=mysql_fetch_array($query1)) 
     { 
      extract($row1); 
    ?> 
    <tr> 
     <td>Designation</td> 
     <td><input type="text" name="des" value="<?php echo $designation; ?>"></td> 
     </td> 
    </tr> 
    <tr> 
     <td>Number of position</td> 
     <td><input type="text" name="des" value="<?php echo $no_of_position; ?>"></td> 
     </td> 
    </tr> 
    <tr> 
     <td>Experience</td> 
     <td><input type="text" name="des" value="<?php echo $experience; ?>"></td> 
     </td> 
    </tr> 
    <tr> 
     <td>Qualification</td> 
     <td><input type="text" name="des" value="<?php echo $qualification; ?>"></td> 
     </td> 
    <tr> 
     <td>Job profile</td> 
     <td><input type="text" name="des" value="<?php echo $job_profile; ?>"></td> 
    </tr> 
    <tr> 
     <td><?php echo"$id"; ?></td> 
     <td><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" id="id1">Show</button> 
     </td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>&nbsp;</td> 
    </tr> 
    <?php } ?> 
</table> 

在上面的代碼中，當我上顯示按鈕點擊，然後彈出窗口打開，代碼如下：

<div id="id01" class="modal1"> 
    <form class="modal1-content animate" action="xyz.php"> 
     <div class="imgcontainer"> 
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close modal1">&times;</span> 
     </div> 
     <div class="container"> 
      <div>Content</div> 
     </div> 
    </form> 
</div> 

<script> 
    // Get the modal1 
    var modal1 = document.getElementById('id01'); 

    // When the user clicks anywhere outside of the modal1, close it 
    window.onclick = function(event) { 
     if (event.target == modal1) { 
      modal1.style.display = "none"; 
     } 
    } 
</script> 

我想送id變量，通過它我可以在彈出窗口中從數據庫獲取值。

謝謝。

Answer 1

如果我理解正確的話，你需要這樣一個AJAX調用PHP頁面：

modalService.php

if(!isset($_GET['id']){ 
    echo "no request"; 
    exit; 
} 
$id = $_GET['id']; 
//Do your query and echo the modal content 

表

<td><?php echo $id; ?></td> 
<td> 
    <button onclick="myFunction('<?php echo $id; ?>')" >Show</button> 
</td> 

JS

function myFunction(id){ 
    var modal = document.getElementById("id01"); 
    modal!==null && (modal.style.display="block"); 
    var modalServiceUrl = "./modalService.php?id="+id; 
    //xhr to get modalService 
} 

編輯：使用jQuery

<button data-queryid="<?php echo $id; ?>" class="showModal">Show</button> 

jQuery(document).ready(function($){ 
    var modal = document.getElementById("id01"); 
    $("button.showModal").on("click", function(){ 
     modal.fadeIn(); 
     var id = $(this).attr("data-queryid"); 
     var modalServiceUrl = "./modalService.php?id="+id; 
     modal.load(modalServiceUrl); 
    }); 
});