Ajax（Asynchronous JavaScript and XML）是一種用于在不重新加載整個網頁的情況下更新網頁部分內容的技術。在網頁開發中，經常會使用Ajax來實現數據的異步加載和交互。本文將介紹如何使用Ajax和PHP來循環顯示數據庫中的內容。通過展示一個商品列表的例子，我們將詳細講解實現過程。
首先，我們需要準備一個數據庫，里面存儲了商品信息，包括商品名稱、價格、庫存等。我們使用MySQL數據庫，并創建一個名為“products”的表，其中包含三個字段：id、name和price。
接下來，我們創建一個HTML頁面，其中包含一個用于顯示商品列表的容器，并引入必要的JavaScript文件。在HTML頁面中，我們使用一個空的div元素來顯示商品列表。
```htmlAjax循環顯示數據庫內容
商品列表
``` 在JavaScript文件（main.js）中，我們使用Ajax來從服務器端獲取商品列表的數據，并將其添加到HTML頁面中。 ```javascript $(document).ready(function() { $.ajax({ url: 'getProducts.php', type: 'GET', dataType: 'json', success: function(data) { var productListHTML = ''; for (var i = 0; i< data.length; i++) { productListHTML += '' + data[i].name + ' - 價格：' + data[i].price + '
'; } $('#product-list').html(productListHTML); }, error: function() { alert('無法獲取商品列表！'); } }); }); ``` 在上面的代碼中，我們使用jQuery的ajax函數發送一個GET請求到服務器上的getProducts.php文件。這個文件負責從數據庫中獲取商品列表的數據，并以JSON格式返回。在成功獲取到數據后，我們使用一個for循環遍歷數據，并將每個商品的名稱和價格添加到一個HTML字符串（productListHTML）中。最后，我們使用jQuery的html函數將這個HTML字符串添加到商品列表的容器中。 接下來，我們來實現服務器端的getProducts.php文件。在這個文件中，我們將連接到數據庫并從中獲取商品列表的數據，并將其以JSON格式返回給客戶端。 ```phpconnect_error) { die("連接失敗: " . $conn->connect_error); } $sql = "SELECT * FROM products"; $result = $conn->query($sql); if ($result->num_rows >0) { $products = array(); while($row = $result->fetch_assoc()) { $products[] = $row; } echo json_encode($products); } else { echo "沒有找到商品！"; } $conn->close(); ?>``` 在這段PHP代碼中，我們首先創建一個與數據庫的連接。然后，我們執行一個查詢，從“products”表中獲取所有的商品數據。如果查詢返回的結果集中有數據，我們將遍歷結果集，將每個商品的數據存儲在一個數組中。最后，我們使用json_encode函數將這個數組轉換為JSON格式并輸出。 通過以上代碼，我們成功地實現了一個使用Ajax循環顯示數據庫中商品列表的功能。無論數據庫中有多少條商品數據，我們都可以通過異步加載的方式動態地在網頁中顯示出來。這在商品展示、文章列表、用戶列表等場景中都非常有用。 在實際應用中，我們還可以結合其他技術，如搜索功能、分頁功能等，來使這個商品列表更加強大和實用。希望本文對你理解Ajax以及使用Ajax循環顯示數據庫的內容有所幫助。上一篇php copy
下一篇java開發和嵌入式