html如何获取后端数据库

HTML是一种用于创建网页的标记语言，它本身并不能直接获取后端数据库的数据，通过JavaScript和一些后端技术，我们可以实现HTML页面与后端数据库的交互，在本回答中，我们将详细介绍如何使用HTML、JavaScript和PHP来实现这一目标。,1、准备工作,我们需要一个运行PHP的服务器环境，这里我们以XAMPP为例，它是一个包含Apache服务器、MySQL数据库和PHP解释器的集成环境，你可以从官方网站下载并安装：https://www.apachefriends.org/index.html,2、创建数据库和表,在安装好XAMPP后，我们需要创建一个数据库来存储数据，这里我们创建一个名为
testdb的数据库，并在其中创建一个名为
users的表，用于存储用户信息。,3、插入数据,接下来，我们向
users表中插入一些数据：,4、创建HTML页面,现在我们创建一个HTML页面，用于显示用户信息，在这个页面中，我们将使用JavaScript来发送AJAX请求，从后端获取数据，并将其显示在页面上。,创建一个名为
index.html的文件，内容如下：,5、创建PHP处理文件,接下来，我们创建一个名为
get_data.php的文件，用于处理前端发起的请求，从数据库中获取数据，并将其以JSON格式返回给前端。,至此，我们已经完成了整个流程，现在，你可以运行XAMPP服务器，然后在浏览器中访问
index.html文件，你将看到一个包含用户信息的表格，这些数据是从后端数据库中获取的。,
,CREATE DATABASE testdb; USE testdb; CREATE TABLE users ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, age INT(3), PRIMARY KEY (id) );,INSERT INTO users (name, age) VALUES (‘张三’, 25); INSERT INTO users (name, age) VALUES (‘李四’, 30); INSERT INTO users (name, age) VALUES (‘王五’, 35);,<!DOCTYPE html> <html lang=”zh”> <head> <meta charset=”UTF8″> <title>获取后端数据库数据</title> <script src=”https://code.jquery.com/jquery3.6.0.min.js”></script> </head> <body> <h1>用户信息</h1> <table id=”userTable” border=”1″> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </table> <script> function loadData() { $.ajax({ url: ‘get_data.php’, // 请求后端数据的URL type: ‘GET’, // 请求类型为GET dataType: ‘json’, // 预期服务器返回JSON格式的数据 success: function(data) { // 请求成功后的回调函数 var table = $(‘#userTable’); // 获取表格元素 for (var i = 0; i < data.length; i++) { // 遍历返回的数据 var row = $(‘<tr></tr>’); // 创建表格行元素 row.append(‘<td>’ + data[i].id + ‘</td>’); // 添加ID列 row.append(‘<td>’ + data[i].name + ‘</td>’); // 添加姓名列 row.append(‘<td>’ + data[i].age + ‘</td>’); // 添加年龄列 table.append(row); // 将行元素添加到表格中 } } }); } loadData(); // 页面加载时调用loadData函数，获取数据并显示在表格中 </script> </body> </html>,<?php header(‘ContentType: application/json’); // 设置响应头，告诉浏览器返回的是JSON格式的数据 $servername = “localhost”; // 数据库服务器地址 $username = “root”; // 数据库用户名（请根据实际情况修改） $password = “”; // 数据库密码（请根据实际情况修改） $dbname = “testdb”; // 数据库名称（请根据实际情况修改） $conn = new mysqli($servername, $username, $password, $dbname); // 建立与数据库的连接 if ($conn>connect_error) { // 如果连接失败，输出错误信息并结束脚本执行 die(“连接失败： ” . $conn>connect_error); } else { // 如果连接成功，执行查询操作，并将结果以JSON格式返回给前端 $sql = “SELECT * FROM users”; // SQL查询语句，从users表中获取所有数据 $result = $conn>query($sql); // 执行查询操作，并将结果保存在$result变量中 $data = array(); // 用于存储查询结果的数组 if ($result>num_rows > 0) { // 如果查询结果中有数据，将其逐行读取并添加到$data数组中 while($row = $result>fetch_assoc()) { // fetch_assoc()方法用于获取查询结果中的每一行数据，并将其作为关联数组返回（键名是字段名） $data[] = $row; // 将每一行数据添加到$data数组中 } } else { // 如果查询结果中没有数据，输出提示信息并结束脚本执行 echo “没有找到数据”; exit; } echo json_encode($data); // 将$data数组转换为JSON格式的字符串，并输出给前端（通过HTTP响应） $conn>close(); // 关闭与数据库的连接（不再需要时一定要关闭连接） } ?>,

html如何获取后端数据库

相关推荐

热门文章