HTML 日历和 JS 问题

Question

我想制作一个基于 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) 循环时，它不起作用。我该怎么做？

Answer 1

由于最佳实践规定您应尽可能将 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) ?>
    });
})();

HTML 日历和 JS 问题

HTML Calendar and JS problems

javascript

php

fullcalendar

fullcalendar-3