AJAX是一種前端技術，用于無需刷新整個頁面的情況下與后端進行數據交互。在使用AJAX進行數據交互時，常常需要將特定的標識符或值傳遞到后端。data-id是一種常用的方式，用于在AJAX請求中傳遞唯一的標識符。本文將介紹使用data-id傳值的方法，并通過舉例說明其應用場景和效果。

首先，我們來看一個簡單的例子。假設我們有一個網頁，其中包含多個評論，每個評論都有一個刪除按鈕，點擊刪除按鈕時，我們需要向后端發送一個AJAX請求，告知后端刪除哪個評論。這時候，我們就可以使用data-id來傳遞評論的唯一標識符。HTML代碼如下：

<div class="comment" data-id="1">
<span class="content">這是第一個評論</span>
<button class="delete-btn">刪除</button>
</div>
<div class="comment" data-id="2">
<span class="content">這是第二個評論</span>
<button class="delete-btn">刪除</button>
</div>

在這段代碼中，每個評論都有一個data-id屬性，該屬性的值為該評論的唯一標識符。當點擊"刪除"按鈕時，我們可以使用JavaScript代碼獲取該評論的data-id值，并將其作為參數傳遞給后端。

$(".delete-btn").click(function() {
var commentId = $(this).closest(".comment").data("id");
$.ajax({
url: "delete-comment.php",
method: "POST",
data: { id: commentId },
success: function(response) {
// 處理刪除評論的結果
}
});
});

在上述代碼中，我們使用jQuery來處理點擊事件。當點擊"刪除"按鈕時，我們使用.closest()方法找到最近的包含".comment"類的父元素，并通過.data()方法獲取其data-id的值。然后，我們將該值傳遞給后端，作為參數id的值。后端可以通過$_POST["id"]來獲取該值，并執行對應的刪除操作。

除了刪除操作，data-id還可以用于其他場景，比如編輯操作。假設我們有一個帶有"編輯"按鈕的表格，點擊"編輯"按鈕時，我們需要獲取該行數據的唯一標識符，并將其傳遞給后端以獲取該行數據的詳細信息。

<tr class="data-row" data-id="1">
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
<td>
<button class="edit-btn">編輯</button>
</td>
</tr>
<tr class="data-row" data-id="2">
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>
<button class="edit-btn">編輯</button>
</td>
</tr>

通過給每一行添加data-id屬性，我們可以輕松地獲取要編輯的行的唯一標識符。當點擊"編輯"按鈕時，我們可以使用以下代碼獲取該值，并將其作為參數傳遞給后端。

$(".edit-btn").click(function() {
var rowId = $(this).closest(".data-row").data("id");
$.ajax({
url: "edit-data.php",
method: "POST",
data: { id: rowId },
success: function(response) {
// 處理獲取行數據的結果
}
});
});

通過以上示例，我們看到了data-id傳值的實際應用。無論是刪除評論還是編輯數據，使用data-id傳值可以很方便地將唯一標識符傳遞給后端，并進行相應的操作。這種方法在實際項目開發中非常常見，因為它簡單直觀，并且可以避免繁瑣的DOM操作。

綜上所述，data-id是一種常用的在AJAX請求中傳遞唯一標識符的方法。通過在對應的HTML元素上添加data-id屬性，我們可以輕松地獲取該值，并將其傳遞給后端。這種方法在實際開發中非常實用，可以簡化代碼邏輯，提高開發效率。無論是刪除評論還是編輯數據，data-id傳值都能夠很好地滿足我們的需求。