首頁  >  文章  >  後端開發  >  如何使用 AJAX 動態更新網站資料而不重新載入頁面?

如何使用 AJAX 動態更新網站資料而不重新載入頁面?

Patricia Arquette
Patricia Arquette原創
2024-11-22 19:43:20329瀏覽

How Can I Update Website Data Dynamically Without Page Reloads Using AJAX?

無需重新加載頁面即可動態更新數據:AJAX 指南

在網站響應能力至關重要的時代,無需重新加載即可更新頁面上的資料刷新整個頁面變得至關重要。本文深入探討 AJAX 技術,讓您在網站上實現即時更新。

AJAX 是「非同步 Javascript 和 XML」的縮寫,可在背景實作非同步資料載入。這表示您可以在不中斷使用者目前視圖或瀏覽體驗的情況下更新內容。

利用 jQuery 來簡化 AJAX 實作

jQuery,一個流行的 JavaScript 函式庫,提供用於整合 AJAX 功能的方便且直接的解決方案。它的 load() 方法提供了一種簡化的方法,可以從 Web 伺服器非同步載入資料並更新頁面上的特定元素。

jQuery 的load() 方法的語法是:

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

其中:

  • 選擇器:指定要使用已載入的內容填充的現有HTML元素data.
  • url:表示從中取得資料的端點的字串。
  • data:隨請求一起傳送的可選資料(鍵/值對)。
  • complete:請求完成後執行的可選回呼函數。

一個實際範例jQuery

考慮以下範例,我們在按一下按鈕時動態載入資料:

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

點擊按鈕時,load() 方法從指定的請求請求資料網址。載入時,“...”顯示為佔位符。成功檢索資料後,「演示」div 中的內容將更新,提供即時更新,無需重新載入頁面。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn