21xrx.com
2025-03-22 08:18:07 Saturday
文章检索 我的文章 写文章
JavaScript如何使用AJAX读取数据库数据
2023-06-11 13:14:03 深夜i     13     0
JavaScript AJAX 数据库读取

JavaScript是一门强大的编程语言，可以通过AJAX技术很容易地从数据库中读取数据，而不用刷新整个页面。在这篇文章中，将介绍如何使用JavaScript和AJAX技术从数据库中获取数据。

在本例中，将使用JavaScript、PHP和MySQL数据库来演示AJAX读取数据的过程。

首先，在HTML文件中创建一个按钮，并指定一个JavaScript函数来触发AJAX请求。

Load Data

然后，在JavaScript文件中编写loadData()函数，该函数通过AJAX请求从服务器获取数据，并将结果输出到HTML文件中。

function loadData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getdata.php", true);
  xhttp.send();
}

在PHP文件getdata.php中，使用MySQL连接（PDO或MySQLi）连接到数据库，并执行查询语句，将结果返回给JavaScript文件。

$dbhost = 'localhost';
$dbuser = 'username';
$dbpass = 'password';
$conn = new mysqli($dbhost, $dbuser, $dbpass);
if(! $conn ) {
  die('Could not connect: ' . mysqli_error($conn));
}
$sql = 'SELECT * FROM mytable';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
  while($row = mysqli_fetch_assoc($result)) {
    echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Age: " . $row["age"]. " ";
  }
} else
  echo "0 results";
mysqli_close($conn);
?>

在HTML文件中，添加一个

元素，并将结果输出到该元素中。

现在，当用户单击“Load Data”按钮时，JavaScript将向getdata.php文件发出AJAX请求，并将查询结果输出到HTML页面上。

以上就是使用JavaScript和AJAX技术从数据库中获取数据的完整代码和步骤。

  
  

评论区