如何使用 jQuery/AJAX 動態重新載入特定 Div 的內容？

使用jQuery/AJAX 重新載入Div 中的內容

要求： 單擊按鈕時重新載入特定div的內容，無需刷新整個頁面。

程式碼片段：

考慮以下程式碼：

<code class="html"><div id="step1Content">
    <div id="list">
        <!-- Content to be reloaded -->
    </div>
</div>

<input type="button" id="getCameraSerialNumbers" value="Capture Again" /></code>

<code class="javascript">$("#getCameraSerialNumbers").click(function() {
    $("#list").load(location.href + " #list");
});</code>

此程式碼使用jQuery 的load () 方法重新載入listlist div 的內容。 location.href 表示目前頁面的 URL，新增「#list」表示僅載入 #list div 中包含的頁面部分。

注意： URL 和第二個「#」之間的空格至關重要。如果沒有它，整個頁面將載入到#list div中。

詳細說明：

1. 事件處理程序：何時點擊「再次捕捉」按鈕，會觸發附加的事件處理程式.
2. load() 方法： load() 方法用於從遠端 URL 或指定的位置載入資料DOM 元素插入目標元素（在本例中為#list）。
3. URL 參數： location.href 與「#list」連線指定瀏覽器應從目前載入內容頁面的 URL，但僅限 #list div 中包含的部分。
4. 重新載入內容：載入內容後，#list div 的現有內容將替換為新檢索的內容.

這種方式可以讓你動態更新網頁上特定div的內容，而無需刷新整個頁面，提供更好的使用者體驗並保持當前頁面狀態。

以上是如何使用 jQuery/AJAX 動態重新載入特定 Div 的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！