在現代Web開發中，使用AJAX技術實現頁面的數據提交和響應已經成為了一種常見的做法。通過AJAX，我們可以實現無需刷新頁面就能夠與服務器進行數據交互的效果。而在許多場景中，當我們提交數據后，我們希望能夠返回到之前的列表頁面，以便繼續瀏覽或者做其他操作。本篇文章將會介紹如何使用AJAX提交后回到列表頁面，幫助讀者更好地理解和運用該技術。
在開始之前，讓我們來看一個具體的例子。假設我們有一個電影列表頁面，其中顯示了不同電影的名稱、類型和上映時間。我們希望能夠在該頁面中添加一部新的電影，并且在添加成功后自動返回到之前的列表頁面。為了實現這個功能，我們可以使用AJAX技術來提交電影信息到服務器，并且在服務器返回成功響應后，通過調整頁面URL來返回到列表頁面。
讓我們來看一下具體的實現方式。首先，我們需要在頁面中添加一個表單，用于輸入電影的名稱、類型和上映時間。在提交按鈕的點擊事件中，我們使用AJAX技術將表單數據發送到服務器。然后，我們在服務器端處理數據，并返回一個成功的響應。
HTML代碼如下所示：

<pre>html
<form id="movieForm" action="/addMovie" method="POST">
<input type="text" name="title" placeholder="電影名稱">
<input type="text" name="genre" placeholder="電影類型">
<input type="text" name="releaseDate" placeholder="上映時間">
<button type="submit" onclick="submitForm()">提交</button>
</form>

JavaScript代碼如下所示：

<pre>javascript
function submitForm() {
var formData = new FormData(document.getElementById("movieForm"));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/addMovie", true);
xhr.onload = function() {
if (xhr.status === 200) {
window.location.href = "/movies"; // 返回到電影列表頁面
}
};
xhr.send(formData);
}

在上述代碼中，我們使用了JavaScript的XMLHttpRequest對象來發送AJAX請求，通過open()方法指定請求的方法、URL和是否異步。在onload事件處理函數中，我們檢查了服務器的響應狀態，如果狀態碼為200表示成功，就使用window.location.href來跳轉到電影列表頁面。
當我們提交電影信息后，頁面并不會立即刷新或跳轉，而是使用AJAX技術將數據發送到服務器并等待響應。一旦服務器返回成功的響應，通過調整頁面URL，我們就可以回到之前的列表頁面，繼續瀏覽其他電影。
總結起來，通過AJAX提交后回到列表頁面是一種常用且靈活的技術，可以在不刷新整個頁面的情況下實現數據的提交和響應。我們以在電影列表頁面添加電影的場景為例，介紹了如何使用AJAX提交后回到列表頁面的具體實現方式。希望本篇文章能夠幫助讀者更好地理解和應用AJAX技術。