如何从数据库调出数据显示到页面PHP+Mysql+Html(简单实例)

本文提供了一个简单的实例,展示了如何使用PHP连接到本地MySQL数据库,选取'content'表中的所有数据,并将结果显示到一个HTML表格中。表格包含编号、用户、标题、内容和发表时间等字段。通过设置查询语句、执行查询和遍历结果集,实现了数据的动态展示。此外,页面还包含一个返回链接。

 首先显示一下数据库的数据

页面信息

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<center><table style="border:dotted;border-color:#F06">
<caption>留言内容</caption>
<tr><th>编号</th><th>用户</th><th>标题</th><th>内容</th><th>发表时间</th></tr>
<?php
$link=mysql_connect('localhost','root','123')or die("数据库连接失败");
//连接数据库
mys

### 使用JavaScript从MySQL数据库中提取数据并在前端页面上展示 为了实现这一目标,通常会采用一种客户端-服务器架构的方式。在这种模式下,JavaScript(特别是通过Ajax技术)用于从前端向后端发送请求,并接收处理后的响应。而后端则负责与数据库交互,获取所需的数据。 #### 构建后端API接口 由于JavaScript本身无法直接访问MySQL数据库,因此需要创建一个中间层——即Web API来作为桥梁。可以利用Node.js及其`express`框架快速搭建RESTful服务[^2]: ```javascript const express = require('express'); const mysql = require('mysql'); // 创建连接池 let pool = mysql.createPool({ host : 'localhost', user : 'root', password : '', database : 'test' }); const app = express(); app.get('/api/data', (req, res) => { pool.getConnection((err, connection) => { if(err){ return res.status(500).send({ error: "Database connection failed" }); } let query = `SELECT * FROM table_name`; connection.query(query, function(error, results){ connection.release(); if(!error){ res.json(results); }else{ console.log(error); res.status(500).json({"message": "An error occurred"}); } }); }); app.listen(3000, () => console.log('Server running at http://localhost:3000')); ``` 这段代码展示了如何建立一个简单的Express应用,它监听来自路径`/api/data`的GET请求,并查询名为`table_name`表中的所有记录。当接收到HTTP GET请求时,此路由处理器将尝试执行SQL语句并将结果以JSON格式返回给调用者。 #### 前端AJAX请求 接下来,在HTML文件内编写相应的JavaScript逻辑,以便能够发起异步请求并与上述API通信。这里使用了jQuery库简化操作流程[^1]: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fetch Data Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="data-container"></div> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: "http://localhost:3000/api/data", method: "GET" }).done(function(data){ var container = $('#data-container'); data.forEach(item => { container.append(`<p>${item.columnName}</p>`); // Replace columnName with actual column name. }); }).fail(function(jqXHR, textStatus){ alert(`Request failed: ${textStatus}`); }); }); </script> </body> </html> ``` 在此示例中,一旦文档加载完毕就会触发一次AJAX调用来获取远程资源;成功之后遍历所获得的对象数组,并将其内容附加至指定DOM节点之下显示出来。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值