在現代Web開發中，前后端分離已經成為了主流。前端負責展示頁面，并通過Ajax技術與后端進行數據交互。而有時候我們需要在Ajax提交后，跳轉頁面來展示新的數據或響應結果。

常見的例子是提交一個表單后，頁面需要跳轉到一個新的頁面來展示提交的結果。假設我們有一個評論系統，用戶在前端填寫評論內容后，點擊“提交”按鈕，頁面需要跳轉到評論列表頁面，并展示新的評論。

// HTML代碼
<form id="commentForm" action="submitComment.php" method="post">
<input type="text" name="comment" id="comment" required />
<button type="submit">提交</button>
</form>

// JavaScript代碼
$(document).ready(function() {
$('#commentForm').submit(function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var comment = $('#comment').val();
$.ajax({
url: 'submitComment.php',
type: 'post',
data: {comment: comment},
success: function(response) {
// 提交成功后跳轉到評論列表頁面
window.location.href = 'commentList.html';
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});

在上述代碼中，我們監聽了表單的提交事件，并通過Ajax將評論內容發送到后端的submitComment.php頁面。當成功接收到返回結果后，我們通過window.location.href將頁面跳轉到評論列表頁面commentList.html。這樣用戶就可以在評論列表頁面看到他們剛剛提交的評論。

除了表單提交，頁面跳轉也可以用于其他需要動態加載內容的場景。例如，我們有一個電商網站，當用戶點擊某個商品的“查看詳情”按鈕時，頁面需要跳轉到該商品的詳情頁面，并展示商品的詳細信息。同樣，我們可以通過Ajax獲取到商品的數據，然后在詳情頁面中進行渲染。

// HTML代碼
<div class="product">
<h3>商品A</h3>
<p>價格: $99</p>
<button class="viewProduct" data-productId="1">查看詳情</button>
</div>

// JavaScript代碼
$(document).ready(function() {
$('.viewProduct').click(function() {
var productId = $(this).data('productId');
$.ajax({
url: 'getProductDetails.php',
type: 'get',
data: {productId: productId},
success: function(response) {
// 提交成功后跳轉到商品詳情頁面，并將商品數據傳遞過去
var url = 'productDetails.html?productId=' + productId;
window.location.href = url;
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});

在這個例子中，我們點擊商品A的“查看詳情”按鈕時，通過Ajax獲取到商品的詳細信息，并將商品ID作為參數傳遞到商品詳情頁面。然后通過window.location.href跳轉到詳情頁面，頁面將在加載時解析URL參數，然后通過Ajax再次請求后端獲取商品的詳細數據并進行渲染。

總結來說，通過Ajax提交后頁面跳轉可以實現在前后端分離的項目中動態地展示新的數據或響應結果。無論是提交表單后跳轉頁面展示提交結果，還是點擊按鈕后跳轉頁面展示新的內容，這種技術都可以提升用戶體驗，避免了頻繁的頁面刷新。