如何使用PHP與JavaScript變量進行交互？

Question

我有一個非常簡單的Web應用程序，它允許用戶輸入名字和姓氏，然后單擊“提交”以將名稱插入sql數據庫。 在表單下方，有一個HTML表，顯示數據庫表的內容。

如果用戶單擊數據庫的任何行，則使用以下函數將HTML元素的ID（設置為與數據庫ID相同的值）保存到javascript變量中。

 <!--JS Functions-->
<script>
//Determine which record is selected.   
var id;
function TableSelect(el) {
id = el.id;
alert(id);
}   
</script>

形式如下：

<!--HTML Form -->
<form method="post" action="index.php">  
    First Name: <input type="text" name="FirstName" value="">
    <br><br>
    Last Name: <input type="text" name="LastName" value="<?php echo $LastName;?>">
    <br><br>
    <input type="submit" name="submit" value="Submit">  
    <input type="submit" name="delete" value="Delete" onclick="Delete()">
</form>

這是數據的PHP處理和SQL表的輸出：

 //prepare query to insert data from form into DB
if (isset($_POST['submit'])){
    $query = "INSERT INTO tbl_HR_Master (First_Name, Last_Name) VALUES ('{$FirstName}', '{$LastName}') ";
    $result = mysqli_query($connection, $query);
    //Test if there was a query error
    querycheck($result);
}//end if

//prepare query to populate table from DB   
$query2 = "Select id, First_Name as 'First Name', Last_Name as 'Last Name' from tbl_HR_Master";
$result2 = mysqli_query($connection, $query2);
//Test if there was a query error
querycheck($result2);

//display table
echo "</br>";
echo "<table id=\"tbl_HR_Master\" border='1'><tr class=\"nohover\"\">";
// printing table headers
$fields_num = mysqli_num_fields($result2);
for($i=0; $i<$fields_num; $i++) {
    $field = mysqli_fetch_field($result2);
    echo "<td>{$field->name}</td>";
} //end for
echo "</tr>\n";
// print table rows
while($row = mysqli_fetch_row($result2))
{   
    echo "<tr>";
    $id = $row[0];
    foreach($row as $cell){
    echo "<td onclick=TableSelect(this) id=". $id .">".$cell."</td>";
    }//end foreach
    echo "</tr>\n";
}//end while

我想運行一個PHP函數，該函數將從數據庫中刪除選定的記錄，但是，顯然PHP在服務器上運行，因此，我需要某種方式來告訴PHP選定的記錄。 再一次，如果您查看我的Javascript函數，則var id =最后選擇的記錄。 如何將這個JS變量解析到服務器進行處理？

簡而言之，要在PHP中執行此操作：

 //delete selected record
if (isset($_POST['delete'])){
   $query3 = "Delete from tbl_HR_Master where id = ". JS VARIABLE HERE." ";



}   //end if 

Answer 1

基於表格

您可以使用一個隱藏的表單字段來執行此操作，並提供一個特定的ID：

<input type="hidden" id="your-id" value="" />

然后在TableSelect函數中分配值：

document.getElementById('your-id').value = id;

然后，就您的情況而言，您可以像訪問其他請求（發布/獲取）參數一樣訪問變量：

$_POST['id']

基於Ajax

使用jQuery，您可以在TableSelect函數中執行如下ajax請求：

 $.ajax({
      url: 'file.php',
      type: 'post',
      data: {'id': el.id},
      success: function(data, status) {
        // ...
      }
 });

請求參數訪問是相同的：

$_POST['id']

Answer 2

您可以在表單中包含一個隱藏變量，並使用javascript設置該隱藏變量onclick的值。

<!--JS Functions-->
<script>
//Determine which record is selected.   
var id;
function TableSelect(el) {
    document.getElementById('selectedRow').value = el.id;
}   
</script>

並在表單標簽中添加以下內容

<input type="hidden" name="selectedRow" id="selectedRow">  

然后，您可以將查詢更新為類似

   $query3 = "Delete from tbl_HR_Master where id = $_POST['selectedRow']";

當然，不要忘記添加消毒和驗證以及所有爵士樂。