AJAX是一種前端技術，用于在一個Web頁面中與服務器進行異步通信。在許多Web應用程序中，我們可能需要向服務器提交請求并獲得結果以更新頁面內容。在本文中，我們將探討如何使用AJAX創建一個彈出式提交結果列表。我們將使用一個簡單的表單作為示例，當提交表單時，通過AJAX向服務器發送請求并將結果顯示在彈出列表中。

讓我們從一個簡單的HTML表單開始。我們將創建一個包含姓名和電子郵件字段的表單：

<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email">
<input type="submit" value="提交">
</form>

接下來，我們將使用JavaScript編寫AJAX代碼來處理表單提交事件。當表單提交時，我們將阻止默認的表單提交行為，并使用AJAX發送POST請求到服務器端腳本（例如PHP）。

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (this.status == 200) {
var response = JSON.parse(this.responseText);
showResults(response);
}
}
xhr.send('name=' + name + '&email=' + email);
});

在上面的代碼中，我們首先使用addEventListener方法在表單提交事件上注冊一個處理函數。在該函數中，我們使用preventDefault方法來阻止表單提交的默認行為，然后獲取表單中的值。之后，我們創建一個XMLHttpRequest對象并使用open方法指定我們要發送請求的方法（這里是POST）和服務器端腳本的URL。我們使用setRequestHeader方法設置請求頭，以便服務器能夠正確解析我們發送的數據。最后，我們發送請求，并在請求成功時解析返回的JSON響應并調用showResults函數來處理結果。

接下來，我們將編寫showResults函數來處理AJAX請求的結果并顯示在彈出列表中：

function showResults(results) {
var resultsList = document.createElement('ul');
results.forEach(function(result) {
var listItem = document.createElement('li');
listItem.textContent = result;
resultsList.appendChild(listItem);
});
var popup = document.createElement('div');
popup.classList.add('popup');
popup.appendChild(resultsList);
document.body.appendChild(popup);
// 設置3秒鐘后自動關閉彈出列表
setTimeout(function() {
popup.remove();
}, 3000);
}

在showResults函數中，我們首先創建一個ul元素作為結果列表的容器。然后，我們遍歷結果數組，并為每一個結果創建一個li元素，并將結果賦值給該元素的文本內容。我們將每個li元素追加到ul列表中。接下來，我們創建一個div元素作為彈出列表的容器，并為該元素添加一個CSS類名以便我們能夠為它定義樣式。我們將結果列表追加到彈出容器中，并將彈出容器追加到頁面的主體元素中。最后，我們使用setTimeout函數設置一個3秒的定時器，在3秒后自動關閉彈出列表。

到此為止，我們已經完成了使用AJAX創建彈出式提交結果列表的全部代碼。當用戶在表單中輸入姓名和電子郵件，并點擊提交按鈕時，表單將被提交，并通過AJAX發送到服務器端。然后，服務器將處理請求并返回一個包含結果的JSON響應。我們將該結果以彈出列表的形式顯示在頁面上。

在本文中，我們使用一個簡單的示例來介紹了如何使用AJAX創建彈出式提交結果列表。通過使用AJAX和一些簡單的JavaScript代碼，我們能夠在不刷新整個頁面的情況下與服務器進行通信，并實時更新頁面內容。這種技術在許多Web應用程序中非常有用，例如表單提交、實時聊天和動態內容加載等。