如何使用AJAX和jQuery在不刷新的情況下更新網頁資料？

無需刷新即可更新頁面上的資料：AJAX 和jQuery 解決方案

無需完整更新即可更新網頁上的動態內容頁面重新載入是互動式和引人入勝的使用者體驗的關鍵要求。這可以透過非同步 JavaScript 和 XML (AJAX) 來實現，這是一種允許在背景載入和更新資料的技術。

實作 AJAX 最受歡迎、最方便的方法之一是透過 jQuery 的 load()方法。此方法提供了一種簡單且通用的解決方案，用於從伺服器非同步載入資料並更新頁面上的特定元素。

要使用 load() 方法，我們指定資料來源的 URL 和目標 HTML 元素載入的資料將放置的位置。此方法支援可選參數將資料傳送到伺服器，並定義請求完成時執行的回呼函數。

以下是 load() 方法語法的細分：

$(selector).load(url, data, complete);

• 選擇器：將接收載入資料的 HTML 元素的 jQuery 選擇器。
• url：將要載入的資料來源的 URL動態載入。
• data（可選）：隨請求一起傳送到伺服器的鍵/值對資料。
• complete（可選）：當請求完成時執行的回呼函數請求已完成。

例如，讓我們考慮一個場景，我們想要更新航班的狀態（例如，出發、巡航或登陸）而不需要用戶重新加載整個頁面。我們可以結合使用 AJAX 和 jQuery 來實現此目的：

$(function() {

  // Specify the server/url you want to load data from
  var url = "https://api.example.com/flight-status";

  // On page load, load the initial flight status into the #flight-status div
  $("#flight-status").load(url);

  // Set up an interval to periodically load the updated flight status (e.g., every 5 seconds)
  setInterval(function() {
    $("#flight-status").load(url);
  }, 5000);

});

在此範例中，我們最初將航班狀態從指定的 URL 載入到 #flight-status div 中。然後我們設定一個間隔，每 5 秒定期載入更新的狀態資訊。因此，航班狀態會即時更新，而不會中斷使用者與頁面的互動。

以上是如何使用AJAX和jQuery在不刷新的情況下更新網頁資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！