JQuery AJAX 是一種便利的方式來更新網頁的一部分內容而無需刷新整個頁面。它也可用于處理網頁的其他任務,例如從服務器獲取數據、保存數據等。此外,JQuery AJAX 也可以用于頁面跳轉,讓用戶在不離開頁面的情況下像點擊鏈接一樣瀏覽其他頁面。下面是使用 JQuery AJAX 進行頁面跳轉的示例:
$(document).ready(function(){ // 監聽頁面上所有的鏈接點擊 $('a').click(function(e){ // 防止鏈接跳轉 e.preventDefault(); // 獲取鏈接地址和目標元素(部分更新頁面內容的元素) var url = $(this).attr('href'); var target = $(this).data('target'); // 發送 AJAX 請求,獲取新頁面的 HTML 內容 $.ajax({ url: url, dataType: 'html', success: function(data){ // 更新目標元素的內容 $(target).html(data); // 修改瀏覽器地址欄的 URL history.pushState(null, null, url); } }); }); // 監聽瀏覽器前進后退按鈕 window.addEventListener('popstate', function(e){ // 如果有歷史記錄,獲取最新 URL 并更新頁面內容 if (e.state){ var url = location.pathname; var target = $('#content'); $.ajax({ url: url, dataType: 'html', success: function(data){ target.html(data); } }); } }); });
在上述代碼中,我們首先監聽頁面上所有鏈接的點擊事件,使用 AJAX 發送請求獲取新頁面的 HTML 內容,并更新目標元素的內容。然后,我們使用 HTML5 的歷史 API 修改瀏覽器地址欄的 URL,讓用戶感覺像是跳轉了一次頁面。最后,我們還監聽了瀏覽器前進后退按鈕的事件,以便能夠正確地更新頁面內容。