如何通过前端网页显示后端添加的用户数据

想要在网站上显示用户数据？这篇文章将为您提供一个简单易懂的教程，教您如何使用HTML、JavaScript和Ajax从后端数据库获取用户数据，并在前端网页上动态显示。

步骤一：创建HTML结构

首先，创建一个名为'users.html'的HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>用户数据</title>
</head>
<body>
  <h1>用户数据</h1>

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电子邮件</th>
      </tr>
    </thead>
    <tbody id='userTableBody'>
      <!-- 这里将显示用户数据 -->
    </tbody>
  </table>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
  <script src='script.js'></script>
</body>
</html>

这段代码创建了一个包含表格的简单网页结构，用于稍后显示用户数据。

步骤二：使用JavaScript获取数据

接下来，创建一个名为'script.js'的JavaScript文件，并将以下代码添加到文件中：

$(document).ready(function() {
  // 当页面加载时，执行以下代码

  // 使用Ajax从后端获取用户数据
  $.ajax({
    url: 'your-backend-url/get-users.php', // 替换为您的后端URL
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 当成功获取到数据时，执行以下代码

      // 清空表格内容
      $('#userTableBody').empty();

      // 遍历数据并添加到表格中
      $.each(data, function(index, user) {
        var row = '<tr>' +
                    '<td>' + user.id + '</td>' +
                    '<td>' + user.name + '</td>' +
                    '<td>' + user.age + '</td>' +
                    '<td>' + user.email + '</td>' +
                  '</tr>';
        $('#userTableBody').append(row);
      });
    },
    error: function() {
      // 当获取数据失败时，执行以下代码
      alert('无法获取用户数据，请重试！');
    }
  });
});

这段代码使用Ajax从后端获取用户数据。请确保将'your-backend-url/get-users.php'替换为您的实际后端URL。

步骤三：创建后端脚本

在您的后端服务器上创建一个名为'get-users.php'的文件，并将以下代码添加到文件中：

<?php
// 连接到数据库
$servername = 'localhost'; // 替换为您的数据库服务器名
$username = 'username'; // 替换为您的数据库用户名
$password = 'password'; // 替换为您的数据库密码
$dbname = 'database'; // 替换为您的数据库名

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
  die('连接失败: ' . $conn->connect_error);
}

// 查询所有用户数据
$sql = 'SELECT * FROM users'; // 替换为您的用户数据表名
$result = $conn->query($sql);

$users = array();

if ($result->num_rows > 0) {
  // 将查询结果转换为关联数组
  while($row = $result->fetch_assoc()) {
    $user = array(
      'id' => $row['id'],
      'name' => $row['name'],
      'age' => $row['age'],
      'email' => $row['email']
    );
    array_push($users, $user);
  }
}

// 将用户数据以JSON格式返回
echo json_encode($users);

// 关闭数据库连接
$conn->close();
?>

这段代码连接到数据库，获取所有用户数据，并以JSON格式返回数据。请根据您的数据库配置修改代码中的相关信息。

总结

通过以上三个步骤，您就可以在前端网页上动态显示后端添加的用户数据了。请记住，这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。