如何使用 jQuery AJAX 检索 MySQL 数据并将其显示在网页上而不需要重新加载？

使用 jQuery AJAX 从 MySQL 检索数据

使用 AJAX（异步 JavaScript 和 XML）与 jQuery，您可以从 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 进行数据库连接。

解决方案

要解决这些问题，请将代码修改为如下：

list.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中文网其他相关文章！