用於使用 PHP AJAX 調用更新數據庫單個條目的按鈕

Question

對於未來的讀者，這是我的第一個問題並且已經找到答案（閱讀下面的評論和回復）：

首先，我在 Stackoverflow 中進行了搜索，但沒有找到類似問題的答案。

我想將 html 按鈕（在許多按鈕中）與 JQuery function 鏈接。 function 應執行 AJAX 方法，如下所示：

HTML 單獨文件索引中的代碼。php：

 <button id="submitbtn" type="button" class="btn btn-success">UPDATE</button>

JQuery Function：

 $('#submitbtn').on('click', function(){ var id = $(this).data('id'); $.ajax({ url: 'includes/updatequery.php', type: 'POST', data: {id:id}, success: function(data){ if (data) { console.log("updated"); } else { $('#error').load("custom/static/error.html"); } }, error: function(jqXHR, textStatus, errorThrown){ $('#error').html("oops" + errorThrown); } }); });

這里是 PHP 文件應該被 AJAX 方法調用：

<?php
include("src/db.php");
$query = "UPDATE mytable SET job='completed' WHERE id=id";
mysqli_query($conn, $query);
  
?>

問題是我無法將單擊按鈕的 ID（因為有很多按鈕）鏈接到數據庫條目的 ID，以便根據此特定按鈕更新數據庫中的數據。

---

現在我想在更新數據庫后實時更新結果。

這是 PHP 代碼 output 菜單項（項目存儲在與以前相同的數據庫表中），並且在每個菜單項的前面，應顯示一個標記（其中包含一個值：“完成”或“未完成”）：

<?php 
            foreach($data as $d) {
              $id = $d['id'];
              $mystatus = $d['status'];
            ?>
              <li class="nav-item">
                <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
                  <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
                  <p><?php
                    echo $d["title"];
                    if ($d['type'] == "job") { ?>
                      <span id="updatedicon" class="right badge <?php if($mystatus == "completed"){echo "badge-success";} else {echo "badge-danger";}?>"><?php setJob($con, $id)?></span><?php
                    } ?>
                  </p>
                </a>
              </li><?php
            }
          ?>

這是定義 setJob 方法的 PHP 文件：

<?php

function setJob($con, $idd) {

$sql = "SELECT status FROM mytable WHERE id=$id";
$result = mysqli_query($con, $sql); 
while ($row = mysqli_fetch_assoc($result)) { 
    foreach ($row as $row => $value) { 
        echo $value; 
   }
}
} 
?>

有什么建議么？

謝謝

Answer 1

使用data-id屬性添加 id：

<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>

https://www.w3schools.com/tags/att_global_data.asp

您可能已經意識到這一點，但在 PHP 土地上，您還需要換出查詢以使用 $_POST['id'] 值作為 id（確保對其進行清理）

Answer 2

更新了 HTML - 將 data-id="" 添加到按鈕並替換為 id

<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>

更新了 jQuery - 使用 attr 通過 data-id 屬性獲取行/記錄的 id

  $('#submitbtn').on('click', function(){
    var id = $(this).attr('data-id');

    $.ajax({
        url: 'includes/updatequery.php',
        type: 'POST',
        data: {id:id},
        success: function(data){
            if (data) {
            console.log("updated");
            } else {
                $('#error').load("custom/static/error.html");
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            $('#error').html("oops" + errorThrown);
        }
    });
});    

Answer 3

我已經成功地通過使用全局選擇器$_POST['id]設置 id 變量來鏈接每個數據庫條目的 ID，正如建議的那樣。

現在我想在 DOM 中實時更新結果。 數據庫中的數據已更新，但 DOM 未相應更新。

I understand that PHP and Javascript are executed in different environments and there is no way to control the Data with Javascript to manipulate the DOM, because Data has been sent back to Client browser after executing the PHP script on the server side. 我將更新我的原始問題，以便您對問題有更清晰的了解。 多謝你們！！