如何使用 jQuery AJAX 檢索 MySQL 資料並將其顯示在網頁上而不需要重新載入？

使用jQuery AJAX 從MySQL 檢索資料

使用AJAX（非同步JavaScript 和XML）與jQuery，您可以從MySQL 檢索資料資料庫並從MySQL將其顯示在網頁上，而無需重新加載整個頁面。為此，請按照以下步驟操作：

jQuery AJAX 程式碼

在您的HTML 檔案中，包含jQuery 程式庫並編寫以下AJAX 程式碼：

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var response = '';
        $.ajax({
            type: "GET",
            url: "Records.php",
            async: false,
            success: function(text) {
                response = text;
            }
        });

        alert(response);
    });
</script>

PHP程式碼

在您的Records.php 文件，連接到 MySQL資料庫並執行查詢以擷取記錄：

$con = mysql_connect("localhost","root","");
$dbs = mysql_select_db("simple_ajax",$con);
$query = "SELECT Name, Address FROM users";
$result = mysql_query($query);

// Create the response in HTML format
$html = "";
while ($row = mysql_fetch_array($result)) {
    $html .= "<tr><td>$row[Name]</td><td>$row[Address]</td></tr>";
}

echo $html;

解決問題

提供的程式碼可能無法正常運作由於以下原因，為您服務：

• 您的list.php在ready函式中有alert(response)語句，這將在AJAX請求完成之前提醒空響應。
• 您的 Records.php 程式碼正在使用已棄用的 mysql_* 函數。您應該使用 mysqli_* 或 PDO 進行資料庫連線。

解決方案

要解決這些問題，請將程式碼修改為如下：

l ist.php

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "Records.php",
            async: false,
            success: function(text) {
                $("#div1 h2").html(text);
            }
        });
    });
</script>

Records.php

<?php

$mysqli = new mysqli("localhost", "root", "", "simple_ajax");
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
}

$result = $mysqli->query("SELECT Name, Address FROM users");

// Create the response in HTML format
$html = "";
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $html .= "<tr><td>{$row['Name']}</td><td>{$row['Address']}</td></tr>";
}

$mysqli->close();
echo $html;

透過這些更改，您的AJAX程式碼應該會成功從 MySQL 資料庫檢索記錄並將其顯示在網頁上，而無需重新載入。

以上是如何使用 jQuery AJAX 檢索 MySQL 資料並將其顯示在網頁上而不需要重新載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！