如何将PHP查询得到的数组结果传递给JS变量用于日历事件展示

我目前正在用JavaScript、PHP结合mysqli开发一款简易日历，想要把数据库中查询到的所有记录传递给JavaScript变量，用来在日历上标记带有事件的日期，点击类似25号这类带事件的日期时就可以展示对应的数据。

以下是我需要展示的数据对应的数据库相关内容
我的PHP代码如下：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "calendar";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$sql = "SELECT * FROM bootstrap" ;
$result = mysqli_query($conn,$sql);
$myArray = array();
    
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row['title'];                   
    }
} 
else {
    print_r ($myArray); 
}
?>

以下是我想要接收PHP查询结果的JavaScript代码部分：

//here I want to pass the array result from my query in php     
var codropsEvents = {
 '08-25-2021' : '<span>New Year\'s day</span>',
 '11-23-2021' : '<span>Second Event</span>',
 '12-2-2021'  : '<span>Last Event</span>'   
};

请问我要怎么实现把PHP查询得到的数组结果传递给上述JavaScript变量？

步骤1：调整PHP数组结构 #

你当前的PHP代码只收集了事件标题，没有关联对应的日期，需要先调整数组结构和JS的codropsEvents格式对齐。假设你的bootstrap表中存储事件日期的字段名为event_date（如果实际字段名不同请替换为你自己的字段名），修改后的PHP代码如下：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "calendar";
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 
$sql = "SELECT * FROM bootstrap";
$result = mysqli_query($conn, $sql);
$events = [];
    
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        // 如果数据库中存储的日期格式为Y-m-d，需要转成JS需要的MM-DD-YYYY格式
        $formattedDate = date('m-d-Y', strtotime($row['event_date']));
        // 组装为「日期为键、事件展示内容为值」的结构
        $events[$formattedDate] = '<span>'.htmlspecialchars($row['title']).'</span>';
    }
}
// 关闭数据库连接
$conn->close();
?>

步骤2：在JS中直接输出PHP转码后的内容 #

直接替换你原来的JS变量定义部分即可：

// 直接通过PHP输出符合格式的事件对象
var codropsEvents = <?php echo json_encode($events, JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS); ?>;

注意事项 #

• 如果你的数据库中已经存储了MM-DD-YYYY格式的日期，可以跳过日期格式化步骤，直接用$row['event_date']作为数组键即可
• json_encode添加的参数用于转义特殊字符，避免JS语法报错和XSS安全问题

内容的提问来源于stack exchange，提问作者Newbie Self Study Developer