如何使用 AJAX 从 JavaScript 中的数据库中获取数据

AJAX 是指异步 JavaScript 和 XML，这是一种用于异步请求数据的技术。在 Web 开发中，它常用于从服务器获取数据，而无需刷新整个页面。

在本教程中，我们将学习如何使用 AJAX 从 JavaScript 中的数据库中获取数据，以便在网页上使用。

第一步：创建一个 PHP 文件

首先，我们需要创建一个 PHP 文件，用于从数据库中检索数据并将其返回到 JavaScript。这里是一个简单的示例：

<?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 * FROM MyGuests";
$result = $conn->query($sql);
// 将数据转换为 JSON 格式
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $rows[] = $r;
}
echo json_encode($rows);
// 关闭连接
$conn->close();
?>

在这个示例中，我们连接到数据库并检索数据，然后将数据转换为 JSON 格式并将其返回到 JavaScript。

第二步：创建一个 JavaScript 文件

接下来，我们需要创建一个 JavaScript 文件，用于从 PHP 文件中获取数据并在网页上使用它。这里是代码示例：

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      console.log(data);
      // 在此处处理数据
    }
  };
  xhttp.open("GET", "getdata.php", true);
  xhttp.send();
}

在这个示例中，我们使用 XMLHttpRequest 对象进行 AJAX 请求，该对象从 PHP 文件中获取数据。一旦获取数据，我们使用 JSON.parse() 方法将数据转换为 JavaScript 对象，然后在控制台上输出数据。

第三步：将数据显示在网页上

现在，我们已经成功地从数据库中获取了数据，接下来我们需要将数据显示在网页上。这里是一个简单的示例：

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      console.log(data);
      var output = document.getElementById("output");
      output.innerHTML = "";
      for (var i = 0; i < data.length; i++) {
        var row = data[i];
        output.innerHTML += row.firstname + " " + row.lastname + "<br>";
      }
    }
  };
  xhttp.open("GET", "getdata.php", true);
  xhttp.send();
}

在这个示例中，我们创建了一个名为 "output" 的空 div 元素，该元素将用于显示数据。然后，我们遍历数据并将每行的 "firstname" 和 "lastname" 字段添加到 div 元素中。

结论

使用上述步骤，我们可以轻松地将数据从数据库中获取并将其显示在网页上。请记住，这只是 AJAX 的一个简单示例，您可以使用 AJAX 在 Web 开发中执行许多其他任务。