HTML 日历和 JS 问题

问题描述

我想制作一个基于 Javascript 的日历来管理假期。我的问题是，我使用 sql 数据库来存储我正在使用 PHP 访问的假期。如何在 JS 脚本中使用 PHP 查询的结果？

例如，要为员工添加假期，我必须这样做：

<?PHP $req='select Nom,DateDebut,DateFin,NbJour from conge where Statut="Valide"';
$res=MysqLi_prepare($connect,$req);
$var=MysqLi_stmt_execute($res);
$var=MysqLi_stmt_bind_result($res,$Nom,$DateDebut,$DateFin,$NbJour);
while(MysqLi_stmt_fetch($res)) {
   // ???
}
?>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
      
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script><script>
          
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',center: 'title',right: 'month,basicWeek,basicDay'
        },defaultDate: '<?PHP echo date("Y-m-d");?>',navLinks: true,editable: true,eventLimit: true,events: [
            {
                title: '<?PHP echo $_SESSION["Login"]?>',start: '2021-04-30',end: '2021-05-03'
            }

当我只使用 <?PHP echo $_SESSION ?> 时，它运行良好。但是当我尝试围绕 stmt_fetch($res) 进行循环时，它不起作用。我怎么能这样做？

解决方法

由于最佳实践要求您应该尽可能地将 PHP 和表示代码分开，因此您要做的是在 PHP 中构建数据数组，然后在需要时将其安全地转储到 JavaScript 中。从 PHP 向 JavaScript 插入数据时始终使用 json_encode() 以确保正确转义值。

我也建议不要使用 mysqli；但如果必须，至少使用面向对象的接口。它更易于使用，并且代码看起来更现代。

<?php
$query = 'SELECT Nom,DateDebut,DateFin,NbJour FROM conge WHERE Statut="Valide"';
$stmt = $connect->prepare($query);
$stmt->execute();
$stmt->bind_result($Nom,$DateDebut,$DateFin,$NbJour);
$events = [];
while($stmt->fetch()) {
    $events[] = [
        "title" => "Vacances de $Nom","start" => $DateDebut,"end" => $DateFin
    ];
}
?>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next,today',center: 'title',right: 'month,basicWeek,basicDay'
        },defaultDate: '<?= json_encode(date("Y-m-d"),\JSON_HEX_TAG) ?>',navLinks: true,editable: true,eventLimit: true,events: <?= json_encode($events,\JSON_HEX_TAG) ?>
    });
})();

fullcalendar fullcalendar-3 javascript