Ajax 是一種強大的網頁開發技術，通過無需刷新整個頁面的方式，可以實現局部頁面內容的動態刷新。當Ajax 請求完成后，我們通常需要將返回的數據放入頁面中。本文將介紹如何使用Ajax 刷新完頁面后將數據放入指定的位置，并通過舉例說明來解釋。 要理解如何將Ajax 請求返回的數據放入指定的位置，我們可以以一個簡單的例子來說明。假設我們有一個電商網站，網頁上有一個商品列表區域，我們希望在用戶點擊“加載更多”按鈕時，通過Ajax 請求獲取更多的商品數據，并將這些商品數據放入列表區域的末尾。下面是一個簡化的示例代碼： ```html加載更多``` ```javascript // 使用 jQuery 實現 Ajax 請求和數據放入 $(document).ready(function() { $('#load-more').click(function() { $.ajax({ url: 'load-more.php', type: 'GET', success: function(data) { // 將返回的數據放入商品列表區域末尾 $('#product-list').append(data); } }); }); }); ``` 在上面的代碼中，我們使用了jQuery 的`$.ajax()`函數來發送Ajax 請求。當用戶點擊"加載更多"按鈕時，會觸發點擊事件處理程序。在這個事件處理程序中，我們發送了一個GET 請求到名為`load-more.php`的服務器端腳本。這個腳本負責返回更多的商品數據。在請求成功后，我們使用jQuery 的`append()`函數將返回的數據放入商品列表區域的末尾。 以上只是一個簡單示例，實際的應用場景可能更為復雜。例如，假設我們有一個頁面上有多個區域需要使用Ajax 請求動態刷新數據，我們可以為每個區域設置一個唯一的ID，將返回的數據放入對應的區域中。代碼示例如下： ```html加載更多商品加載更多新聞``` ```javascript // 使用 jQuery 實現 Ajax 請求和數據放入 $(document).ready(function() { $('#load-more-product').click(function() { $.ajax({ url: 'load-more-product.php', type: 'GET', success: function(data) { // 將返回的數據放入商品列表區域末尾 $('#product-list').append(data); } }); }); $('#load-more-news').click(function() { $.ajax({ url: 'load-more-news.php', type: 'GET', success: function(data) { // 將返回的數據放入新聞列表區域末尾 $('#news-list').append(data); } }); }); }); ``` 在上述代碼中，我們為每個需要刷新數據的區域設置了一個唯一的ID。當對應的按鈕被點擊時，我們發送對應的Ajax 請求并將返回的數據放入對應的區域中。這樣，我們可以在一個頁面上同時刷新多個不同區域的數據。 總結起來，當Ajax 請求返回數據后，我們可以通過 jQuery 提供的函數（如`append()` 等）將數據放入指定的位置。無論是簡單的刷新商品列表，還是復雜的同時刷新多個區域，使用Ajax 刷新完頁面后放入數據是一種非常高效和實用的方式。