在現代web開發中，頁面跳轉是一個常見的需求。傳統上，我們會通過a標簽的href屬性或者表單的submit事件來實現頁面跳轉。然而，這種方式會導致整個頁面刷新，給用戶帶來不良體驗。而使用Ajax技術，我們可以實現頁面跳轉的同時，只刷新頁面的一部分內容，提升了用戶的體驗。本文就將通過舉例來介紹如何使用Ajax完成頁面跳轉。

假設我們有一個博客網站，在網站的首頁上有一個文章列表，點擊文章標題后，可以跳轉到文章詳情頁面。傳統的做法是使用a標簽的href屬性來實現跳轉：

<a href="article.html?id=1">文章標題1</a>

當用戶點擊這個鏈接時，會加載article.html頁面，并且把id=1這個參數傳遞過去。這種方式的問題是，整個頁面會刷新，用戶體驗差。而通過Ajax，我們可以實現在不刷新整個頁面的情況下，加載文章詳情。我們可以使用jQuery框架來方便地實現Ajax功能：

<script src="jquery.js"></script>
<script>
$('a').click(function(event) {
event.preventDefault(); // 阻止默認的頁面跳轉行為
var url = $(this).attr('href'); // 獲取文章詳情頁面的URL
$.get(url, function(data) {
$('#content').html(data); // 把返回的文章詳情內容顯示在頁面中的某個元素中
});
});
</script>

在上述代碼中，我們通過給所有的a標簽綁定點擊事件來實現對文章詳情頁面的Ajax請求，其中event.preventDefault()阻止了默認的頁面跳轉行為。我們通過$.get()方法向服務器發送請求，并且在請求成功之后，將返回的內容存放到id為content的元素中。這樣，當用戶點擊文章標題時，頁面不會刷新，而是局部更新了文章詳情。

除了通過點擊鏈接實現Ajax頁面跳轉，我們也可以通過表單的提交事件來實現。假設我們在博客網站中，有一個發表評論的功能，用戶在評論框中填寫完評論內容后，點擊提交按鈕即可發表評論。傳統的做法是使用表單的submit事件來實現提交：

<form action="comment.php" method="post">
<textarea name="comment"></textarea>
<input type="submit" value="提交">
</form>

用戶點擊提交按鈕后，頁面會刷新，將表單中的數據提交到comment.php。而使用Ajax，我們可以實現表單的提交的同時，只刷新評論列表的內容而不刷新整個頁面。同樣，我們可以使用jQuery來方便地實現：

<script src="jquery.js"></script>
<script>
$('form').submit(function(event) {
event.preventDefault(); // 阻止默認的表單提交行為
var url = $(this).attr('action'); // 獲取表單的提交地址
var data = $(this).serialize(); // 獲取表單中的數據
$.post(url, data, function(response) {
$('#comment-list').html(response); // 把返回的評論列表內容顯示在頁面中的某個元素中
$('textarea[name="comment"]').val(''); // 清空評論框
});
});
</script>

在上述代碼中，我們通過給所有的表單綁定submit事件來實現對評論的Ajax提交，其中event.preventDefault()阻止了默認的表單提交行為。我們通過$.post()方法向服務器發送post請求，并且在請求成功后，將返回的評論列表內容存放到id為comment-list的元素中，同時清空評論框的內容。

通過上述的代碼示例，我們可以看到使用Ajax完成頁面跳轉，只刷新頁面的一部分內容，從而提升了用戶的體驗。無論是點擊鏈接跳轉頁面，還是提交表單更新內容，都可以通過Ajax來實現。希望本文對你學習Ajax有所幫助。