如何在marquee中展示MySQL数据？连接成功却无内容显示

我来帮你搞定这个问题！既然已经连上数据库了，那问题大概率出在数据获取或者前端渲染的环节，咱们一步步来解决：

一、先确保后端正确获取并处理数据 #

以PHP为例（这是和MySQL搭配最常用的后端语言之一），先写好数据库查询的逻辑：

<?php
// 替换成你的数据库真实信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

// 查询jobs表的所有数据
$sql = "SELECT * FROM jobs";
$result = $conn->query($sql);

// 用来存储要展示的滚动内容
$jobScrollText = "";

if ($result->num_rows > 0) {
    // 遍历每一条数据，把需要展示的字段拼接成字符串
    while($row = $result->fetch_assoc()) {
        // 这里可以根据你的表结构调整字段，比如职位名、薪资、地点等
        $jobScrollText .= "【职位】" . $row["job_title"] . " | 【薪资】" . $row["salary"] . " | 【地点】" . $row["location"] . " | ";
    }
} else {
    $jobScrollText = "当前暂无招聘职位信息";
}

$conn->close();
?>

二、前端把数据插入<marquee>标签 #

把上面的PHP代码和HTML结合，让后端拿到的数据直接渲染到滚动标签里：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滚动招聘信息</title>
</head>
<body>
    <!-- 自定义滚动的行为、方向和速度，可根据需求调整 -->
    <marquee behavior="scroll" direction="left" scrollamount="4" style="font-size:16px; color:#2c3e50;">
        <?php echo $jobScrollText; ?>
    </marquee>
</body>
</html>

三、排查常见问题（这可能是你没显示内容的核心原因） #

• 确认jobs表是否有数据：先打开MySQL客户端，执行SELECT * FROM jobs;，如果表是空的，那自然显示不了内容。
• 验证后端是否真的拿到数据：可以在PHP代码里直接加一句echo $jobScrollText;，看页面是否输出了数据，如果这里是空的，那就是查询环节出问题了。
• 检查SQL语句是否正确：比如表名、字段名有没有写错（MySQL对大小写敏感，要和实际命名一致），可以在后端添加错误提示：

  if (!$result) {
      echo "查询错误: " . $conn->error;
  }
  

• 确认<marquee>标签写法正确：别写错标签名，behavior可选scroll/slide/alternate，direction控制滚动方向，scrollamount控制速度，确保没有语法错误。

四、其他后端语言的示例（如果不用PHP） #

比如用Node.js + Express的话，逻辑完全一致：

const express = require('express');
const mysql = require('mysql2');
const app = express();

// 数据库连接配置
const db = mysql.createConnection({
  host: 'localhost',
  user: '你的用户名',
  password: '你的密码',
  database: '你的数据库名'
});

db.connect();

app.get('/', (req, res) => {
  db.query('SELECT * FROM jobs', (err, results) => {
    if (err) throw err;
    let jobScrollText = '';
    if (results.length > 0) {
      results.forEach(job => {
        jobScrollText += `职位：${job.job_title} | 薪资：${job.salary} | `;
      });
    } else {
      jobScrollText = '暂无职位信息';
    }
    res.send(`
      <html>
        <body>
          <marquee direction="left" scrollamount="3">${jobScrollText}</marquee>
        </body>
      </html>
    `);
  });
});

app.listen(3000, () => console.log('服务器运行在http://localhost:3000'));

最后提一句：<marquee>是HTML的非标准标签，虽然主流浏览器都支持，但如果需要更灵活的滚动效果（比如鼠标悬停暂停、自定义样式），可以用JavaScript实现，但如果只是简单需求，用它完全够用。

内容的提问来源于stack exchange，提问作者reeena11