前端開發中，經常會遇到需要將集合或數組傳遞到模態框的需求。AJAX（Asynchronous JavaScript and XML）正是一種用于在后臺與服務器進行異步通信的技術，可以通過AJAX來實現將集合傳遞到模態框的功能。下面將介紹如何使用AJAX將集合傳遞到模態框。
在開始之前，我們先來看一下使用AJAX將集合傳遞到模態框的效果。假設我們有一個學生名單的集合，我們需要將這個集合傳遞到模態框中以展示給用戶。通過AJAX，我們可以從服務器獲取數據，然后將數據填充到模態框的表格中，最終呈現給用戶。下面是一段使用AJAX將集合傳遞到模態框的示例代碼：

html
<button onclick="showModal()">顯示模態框</button>
<div id="modal" class="modal">
<div class="modal-content">
<table id="studentTable">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</table>
</div>
</div>
<script>
function showModal() {
var modal = document.getElementById('modal');
modal.style.display = 'block';
// 使用AJAX獲取學生名單數據
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getStudentList', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
// 在模態框表格中添加學生名單數據
var table = document.getElementById('studentTable');
for (var i = 0; i < students.length; i++) {
var student = students[i];
var row = table.insertRow(i + 1);
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
var genderCell = row.insertCell(2);
nameCell.innerHTML = student.name;
ageCell.innerHTML = student.age;
genderCell.innerHTML = student.gender;
}
}
};
xhr.send();
}
</script>

在上述代碼中，我們首先定義一個按鈕，當按鈕被點擊時，調用showModal()函數來顯示模態框。在showModal()函數中，我們首先通過getElementById()方法獲取到模態框的元素，然后將其顯示出來（通過設置display屬性為block）。接著，我們使用AJAX來獲取學生名單數據。通過XMLHttpRequest對象的open()方法來指定請求的類型、URL和是否異步，再通過onreadystatechange事件來監聽請求狀態變化，并在狀態為4（請求已完成）且狀態碼為200時，將獲取到的學生名單數據進行處理。
在成功獲取到學生名單數據后，我們將其填充到模態框的表格中。首先，通過getElementById()方法獲取到表格的元素，在表格的第一行添加表頭。然后，使用一個循環遍歷學生名單數據，創建表格中的每一行，并將學生的姓名、年齡和性別填充到對應的單元格中。最終，模態框將顯示帶有學生名單的表格。
通過上述的代碼示例，我們可以看到使用AJAX將集合傳遞到模態框的過程。AJAX通過異步通信的方式，從服務器獲取到集合數據后，我們可以在前端將數據展示給用戶，實現了更好的用戶體驗。無論是展示學生名單、商品列表還是其他集合數據，AJAX都能幫助我們快速、高效地將集合傳遞到模態框中。