Ajax 是一種常用的前端技術(shù)，通過Ajax 可以在不刷新整個頁面的情況下與后端進(jìn)行數(shù)據(jù)交互。其中，刪除數(shù)據(jù)是前后端交互中常見的一種操作。本文將介紹如何使用Ajax 進(jìn)行刪除操作，并且傳遞參數(shù)為數(shù)組的情況。
假設(shè)我們有一個待辦事項列表，用戶可以通過勾選多個事項并點擊刪除按鈕進(jìn)行批量刪除。后端使用PHP編寫，前端使用jQuery 進(jìn)行Ajax 請求。以下是一個示例的HTML 代碼：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="todo-list">
<input type="checkbox" name="task[]" value="1"> Task 1<br>
<input type="checkbox" name="task[]" value="2"> Task 2<br>
<input type="checkbox" name="task[]" value="3"> Task 3<br>
<input type="checkbox" name="task[]" value="4"> Task 4<br>
<input type="checkbox" name="task[]" value="5"> Task 5<br>
<button id="delete-button">刪除選中事項</button>
</div>
<script>
$(document).ready(function() {
$("#delete-button").click(function() {
var selectedTasks = [];
// 遍歷所有勾選的checkbox 并將其值存入selectedTasks 數(shù)組中
$("input[name='task[]']:checked").each(function() {
selectedTasks.push($(this).val());
});
// 使用ajax 向后端發(fā)送刪除請求
$.ajax({
url: "delete.php",
type: "POST",
data: {tasks: selectedTasks},
dataType: "json",
success: function(response) {
if (response.success) {
// 成功刪除事項后執(zhí)行的操作
alert("刪除成功！");
} else {
// 刪除失敗時執(zhí)行的操作
alert("刪除失敗，請重試。");
}
}
});
});
});
</script>
</body>
</html>在上述代碼中，我們給每個待辦事項的Checkbox 添加了一個名為"task[]" 的數(shù)組，并為每個Checkbox 設(shè)置了一個唯一的value 值。
JavaScript 部分的代碼監(jiān)聽了刪除按鈕的點擊事件。當(dāng)點擊按鈕時，它會遍歷所有勾選的Checkbox 并將其值存入selectedTasks 數(shù)組中。然后，它使用jQuery 的ajax 方法向后端發(fā)送一個POST 請求，將selectedTasks 數(shù)組作為參數(shù)的值傳遞給后端的delete.php 文件。
在服務(wù)器端，我們可以使用PHP 來處理請求并刪除相應(yīng)的事項。以下是一個簡單的delete.php 文件的例子：
<?php
// 獲取從前端傳遞過來的數(shù)組參數(shù)
$tasks = $_POST['tasks'];
// 刪除選中的事項
$success = deleteTasks($tasks);
if ($success) {
$response = array('success' =>true);
} else {
$response = array('success' =>false);
}
// 將響應(yīng)以JSON 格式返回給前端
echo json_encode($response);
function deleteTasks($tasks) {
// 實現(xiàn)刪除事項的邏輯
// ...
return true; // 返回true 表示刪除成功，返回false 表示刪除失敗
}
?>在delete.php 文件中，我們首先通過$_POST['tasks'] 獲取到前端傳遞過來的數(shù)組參數(shù)。然后，我們可以根據(jù)實際需求編寫刪除事項的邏輯，這里只是一個示例。在本例中，我們簡單地將刪除事項的邏輯封裝在一個函數(shù)deleteTasks() 中，并返回一個表示刪除成功與否的布爾值。
最后，我們根據(jù)刪除操作的結(jié)果，將一個JSON 對象作為響應(yīng)返回給前端。前端根據(jù)響應(yīng)的結(jié)果做出相應(yīng)的提示操作。
通過以上的代碼，我們可以實現(xiàn)通過Ajax 進(jìn)行刪除操作，并且傳遞參數(shù)為數(shù)組的功能。這樣，用戶就可以方便地批量刪除待辦事項，提升了用戶體驗。