如何用JavaScript读取MySQL数据存入数组并加载到FullCalendar日历

1 首要解决404报错 #

报错中最核心的问题是请求cargarevento.php返回404，说明前端请求的文件路径和实际文件存放位置不匹配：

• 首先确认cargarevento.php是否确实存放在/xampp/App-produccion/App%20produccion%202.8/calendario/目录下
• 确认文件名大小写完全匹配，服务器对路径大小写敏感
• 建议修改目录名去掉空格，避免路径编码异常
• 如果文件存放路径不符，把前端FullCalendar配置里的events: "cargarevento.php"改成正确的路径，比如文件放在站点根目录就写成events: "/cargarevento.php"

2 前端代码错误修正 #

当前前端JS存在语法错误：

var today = 2021-10-07;

这行代码会被识别为数值减法运算，不是合法的日期字符串，修改为：

var today = '2021-10-07';

3 后端PHP代码错误修正 #

当前PHP代码不会返回符合要求的JSON数据，存在两处核心错误：

1. 没有设置JSON返回头，也没有输出json_encode的处理结果
2. 遍历数据前调用了无意义的空数组json编码
   修正后的完整代码：

<?php
// 声明返回内容为JSON格式
header('Content-Type: application/json; charset=utf-8');

$host = '127.0.0.1';
$db   = 'produccion';
$user = 'root';
$pass = '';
$port = "3306";
$charset = 'utf8';

$options = [
    \PDO::ATTR_ERRMODE            => \PDO::ERRMODE_EXCEPTION,
    \PDO::ATTR_DEFAULT_FETCH_MODE => \PDO::FETCH_ASSOC,
    \PDO::ATTR_EMULATE_PREPARES   => false,
];
$dsn = "mysql:host=127.0.0.1:3306;dbname=$db;charset=$charset;";
try {
     $pdo = new \PDO($dsn, $user, $pass);
} catch (PDOException $e) {
     echo json_encode(['error' => $e->getMessage()]);
     exit;
}
$data = array();

$query = "SELECT PID, INICIO, FIN FROM calendario ORDER BY PID;";

$statement = $pdo->prepare($query);
$statement->execute();
$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'title'   => $row["PID"],
  'start'   => $row["INICIO"],
  'end'     => $row["FIN"]
 );
}
// 输出最终JSON数据
echo json_encode($data);
exit;
?>

4 非致命警告优化 #

你看到的两个Violation是性能提示，不影响功能运行，可按需优化：

• 把body里的CSS样式块移动到head标签内，避免页面重排
• 删除重复引入的jQuery文件（你同时引入了jquery.min.js和jquery-3.5.1.js两个版本，保留一个即可）

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