PHP怎么把数据库数据传给JS-php教程-PHP中文网

php将数据库数据传给js的核心思路是：php读取数据→转为json→输出到前端可访问位置；方式一内联json需防xss，方式二ajax更安全推荐，方式三data-*属性适合轻量元信息。

php怎么把数据库数据传给js

PHP 把数据库数据传给 JS，核心思路是：PHP 从数据库读取数据 → 转成 JSON 格式 → 输出到前端（HTML/JS 可访问的位置）。关键不是“直接传”，而是“让 JS 能安全、正确地拿到 PHP 处理好的数据”。

方式一：在 HTML 中内联输出 JSON（适合简单、静态场景）

把 PHP 查询结果用 json_encode() 转成 JSON 字符串，直接写进 <script></script> 标签里，JS 就能直接使用。

示例（PHP + HTML 混写）：

<?php // 假设已连接数据库
$stmt = $pdo->query("SELECT id, name, email FROM users LIMIT 5");
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<p><script>
// 注意：必须用 htmlspecialchars 防 XSS，且 JSON 必须合法
const userData = <?= json_encode($users, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) ?>;
console.log(userData); // JS 直接可用数组对象
</script></p>

⚠️ 注意事项：

务必用 json_encode()，不要手动拼 JSON 字符串
加 JSON_UNESCAPED_UNICODE 支持中文不转义
加 JSON_HEX_TAG 等选项防 XSS（尤其当数据含用户输入时）
确保 PHP 输出前没任何 echo/print/空格/报错，否则 JSON 会损坏

方式二：通过 AJAX 异步获取（推荐，适合动态、复杂交互）

前端 JS 发起请求（如 fetch 或 axios），PHP 后端脚本查库、返回 JSON，JS 接收并处理。

① 新建 get_users.php（纯数据接口）：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

<?php header('Content-Type: application/json; charset=utf-8');
// 简单校验（如 session 或 token，按需加）
if (!isset($_SESSION['user_id'])) {
    http_response_code(403);
    echo json_encode(['error' => '未登录']);
    exit;
}
<p>try {
$stmt = $pdo->query("SELECT id, name, email FROM users WHERE status = 1");
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['success' => true, 'data' => $data], JSON_UNESCAPED_UNICODE);
} catch (Exception $e) {
http_response_code(500);
echo json_encode(['error' => '查询失败']);
}
?></p>

② 前端 JS 调用：

fetch('get_users.php')
  .then(res => {
      if (!res.ok) throw new Error('网络错误');
      return res.json();
  })
  .then(data => {
      if (data.success) {
          console.log(data.data); // [{id:1,name:"张三",...}, ...]
          renderUserList(data.data);
      } else {
          alert(data.error);
      }
  })
  .catch(err => console.error(err));

✅ 优势：前后端分离清晰、可缓存、支持分页/搜索/权限控制、不易 XSS

方式三：用 data-* 属性挂载少量数据（适合模板渲染后轻量传递）

如果只是传几个字段（比如用户 ID、状态），可写在 HTML 标签上，JS 再读取。

<?php $user = $pdo->fetch("SELECT id, role FROM users WHERE id = ?", $_GET['id']); ?>
<div id="profile" data-user-id="<?= (int)$user['id'] ?>" data-role="<?= htmlspecialchars($user['role']) ?>">
  <h2>个人资料</h2>
</div>

JS 获取：

const profile = document.getElementById('profile');
const userId = profile.dataset.userId; // 自动转字符串，注意类型
const role = profile.dataset.role;

? 适用场景：单条记录的元信息，不建议传数组或大量数据

避坑提醒

常见错误和应对：

中文乱码：确保数据库连接、表字段、PHP 文件、HTML meta 全部是 UTF-8；json_encode 加 JSON_UNESCAPED_UNICODE
JSON 解析失败：检查 PHP 是否有 warning/notice 输出（开启 display_errors=Off 生产环境）；用浏览器 Network 查看响应体是否纯 JSON
XSS 风险：永远不要用 echo $unsafe_data 直接插入 JS；对用户数据用 htmlspecialchars(..., ENT_QUOTES, 'UTF-8') 或严格 JSON 编码
跨域问题：AJAX 方式下，若前端和 PHP 不同源（协议/域名/端口任一不同），需在 PHP 响应头加 header('Access-Control-Allow-Origin: *');（生产环境慎用，指定域名更安全）

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！