AJAX接收一個List集合
AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個頁面的情況下更新部分頁面內容的技術。它可以在后臺與服務器進行異步通信，并通過JavaScript在網頁上動態顯示數據。在Web開發中，經常需要使用AJAX來接收List集合，并在前端頁面中展示出來。
假設我們有一個用于管理學生信息的網站。在后臺，我們使用Java編寫了一個Controller來處理學生信息的增刪改查操作。當我們需要在前端頁面顯示學生列表時，可以使用AJAX來接收后臺傳遞過來的List集合，并動態地將這些數據呈現出來。
首先，我們需要在前端頁面引入jQuery庫，因為它提供了簡化AJAX請求的方法。在HTML的標簽內加入以下代碼：

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

之后，我們可以使用以下代碼來發送AJAX請求，并在成功接收到響應后處理數據。

javascript
<script>
$(document).ready(function() {
$.ajax({
url: "getStudents", // 后臺Controller映射的URL
type: "GET",
dataType: "json",
success: function(students) {
// 在這里處理接收到的List集合
if(students.length > 0) {
var html = "<table><tr><th>ID</th><th>姓名</th><th>年齡</th></tr>";
for(var i = 0; i < students.length; i++) {
var student = students[i];
html += "<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.age + "</td></tr>";
}
html += "</table>";
$("#studentList").html(html); // 將數據展示在id為studentList的元素中
} else {
$("#studentList").html("暫無學生信息");
}
},
error: function() {
alert("獲取學生信息失敗");
}
});
});
</script>

在這段代碼中，我們指定了AJAX請求的URL、請求類型、數據類型等參數，并定義了成功接收到響應和出錯時的處理函數。在成功接收到響應時，我們通過遍歷List集合將每個學生的ID、姓名和年齡組裝成一個HTML表格，并將該表格內容插入到HTML中id為studentList的元素的位置。如果List集合為空，我們會顯示出"暫無學生信息"的提示。
通過上述代碼，我們實現了在前端頁面動態展示學生信息的功能。假設我們有一個學生列表，其中包含三位學生的信息：
ID | 姓名 | 年齡
----| ------- | -----
1 | 張三 | 20
2 | 李四 | 21
3 | 王五 | 22
當我們訪問該頁面時，AJAX會向后臺發送請求，后臺返回給前端一個包含這三位學生信息的List集合。AJAX把這個List集合轉換成HTML表格，并將其插入到頁面中id為studentList的元素中。結果就是我們看到了一個包含這三位學生信息的表格。
總結來說，AJAX接收一個List集合是非常有用的，它使得我們能夠在不刷新整個頁面的情況下，動態地顯示后臺傳遞過來的數據。無論是學生列表、商品列表還是其他類型的列表，都可以通過AJAX實現動態展示，提升用戶體驗。