如何使用 jQuery AJAX 检索 MySQL 数据？

使用 jQuery AJAX 从 MySQL 检索数据

增强 Web 应用程序的交互性需要一种稳健的方式来与服务器通信，而无需刷新整个页面。 jQuery AJAX 通过发送异步请求并处理来自服务器的响应来提供此功能。在本例中，我们的目标是从 MySQL 数据库检索数据。

list.php 中提供的代码片段尝试使用 jQuery AJAX 检索记录，但无法正常运行。为了解决这个问题，我们将制作一个改进版本，可以成功从 MySQL 表中检索数据。

JavaScript 代码：

<script type="text/javascript">
$(document).ready(function() {
  $("#display").click(function() {
    $.ajax({
      type: "GET",
      url: "Records.php", 
      dataType: "html", 
      success: function(response) {                    
          $("#responsecontainer").html(response); 
      }
    });
  });
});
</script>

解释：

• 文档就绪功能确保 JavaScript 代码在 DOM 完全加载后执行已加载。
• 单击“显示”按钮时，使用 $.ajax() 函数发起 AJAX 请求。
• 使用以下命令将请求发送到“Records.php”脚本GET 方法。
• 我们期望收到响应中的 HTML 数据，由 dataType: "html" 表示设置。
• 成功响应（HTTP 状态代码 200）时，响应将填充到“responsecontainer”div 元素中，从而有效地在页面上显示数据。

PHP代码：

连接：

<?php
$con=mysqli_connect("localhost","root","");
mysqli_select_db("simple_ajax",$con);

• 此部分建立 MySQL 连接并选择“simple_ajax”数据库。

查询与响应：

$result=mysqli_query("select * from users",$con);
echo "<table border='1' >...";
while($data = mysqli_fetch_row($result)){ 
     // Display the fetched data in HTML table format 
}
echo "</table>";

• 查询从“users”表中检索所有记录。
• 迭代结果，每行数据显示在 HTML 中

结论：

通过执行这些修改后的步骤，您可以使用 jQuery AJAX 成功从 MySQL 数据库检索数据并将其填充到前端，如下所示想要的。这种方法可以实现动态和交互式 Web 应用程序，而无需重新加载整页。

以上是如何使用 jQuery AJAX 检索 MySQL 数据？的详细内容。更多信息请关注PHP中文网其他相关文章！