如何使用 jQuery 動態更新頁面資料而不重新載入頁面？

無需重新載入即可動態更新頁面資料

現代Web 應用程式通常需要即時資料更新，而不需要使用者重新載入整個頁面。這可以透過稱為 AJAX（非同步 JavaScript 和 XML）的技術來實現。

AJAX 允許從 Web 伺服器非同步後台載入數據，允許開發人員更新頁面的特定部分而無需刷新它。 jQuery 函式庫提供了一種使用 load() 方法實作 AJAX 的便利方法。

load() 方法採用三個主要參數：標識要更新的 HTML 元素的選擇器、資料來源的 URL 和載入資料時執行的回調函數（可選）。

範例：

使用jQuery load()方法：

$(function() {
  $.ajaxSetup({
    cache: false
  });

  var url = "https://baconipsum.com/api/?type=meat-and-filler";

  $("#button").click(function() {
    $("#demo").html("...").load(url);
  });
});

HTML 標記：此範例在按一下按鈕時將資料動態載入至「示範」div中，顯示“...”直到資料載入完畢。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

利用 AJAX 和 jQuery，無需頁面即可更新頁面資料重新加載，透過提供即時更新和減少頁面加載時間來增強用戶體驗。

以上是如何使用 jQuery 動態更新頁面資料而不重新載入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！