AJAX是一種通過JavaScript在不重新加載整個頁面的情況下向服務器發送請求和接收響應的技術。使用AJAX連接MySQL數據庫,可以實現動態更新數據的目的。以下是一個簡單的示例:
<script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "getdata.php", true); xhttp.send(); } </script> <button onclick="loadDoc()">Click me</button> <p id="demo"></p>
在上面的代碼中,我們定義了一個loadDoc()函數,用于向服務器發送請求并在響應中獲取數據。該函數使用XMLHttpRequest對象創建一個HTTP請求,并指定響應處理函數。當服務器響應時,該函數將響應文本插入到HTML元素中。
該示例中的getdata.php文件是一個服務端腳本,用于從MySQL數據庫中檢索數據。以下是getdata.php的代碼:
<?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; // 創建連接 $conn = new mysqli($servername, $username, $password, $dbname); // 檢測連接 if ($conn->connect_error) { die("連接失敗: " . $conn->connect_error); } $sql = "SELECT id, firstname, lastname FROM MyGuests"; $result = $conn->query($sql); if ($result->num_rows > 0) { // 輸出每行數據 while($row = $result->fetch_assoc()) { echo "<br> id: ". $row["id"]. " - Name: ". $row["firstname"]. " " . $row["lastname"]; } } else { echo "0 結果"; } $conn->close(); ?>
在getdata.php文件中,我們首先創建一個MySQL連接,并檢測連接是否成功。然后,我們使用SELECT語句從MyGuests表中檢索數據,將結果存儲在$result中。接著,我們使用循環迭代$result并輸出每一行的數據。
通過將這兩個文件結合在一起,我們可以實現使用AJAX從MySQL數據庫中檢索數據,并在網頁中動態更新顯示。