如何从MySQL读取JSON数据并在jQuery日程控件中展示

看起来你现在的问题主要出在后端数据输出格式不对和前端没有正确获取并传递数据这两个地方，我帮你一步步调整：

第一步：修正后端import.php代码 #

你原来的代码在处理JSON数据时犯了个小错误：数据库里存的JSON是一个数组（开头是[{...}]），所以json_decode后得到的是对象数组，不能直接用$jsondata->periods访问。而且后端需要返回完整的JSON结构给前端，不是零散输出内容。修改后的代码如下：

<?php
// 确保这里已经正确初始化了数据库连接$conn
$selected = mysqli_select_db($conn,"db");
$fetch_port_relation = "SELECT * FROM `test`";
$result_port_relation = $conn->query($fetch_port_relation);

$scheduleData = [];
if ($result_port_relation->num_rows > 0) {
    // 假设test表中只有一条存储整个日程的记录，取到后就退出循环
    $ios_row = $result_port_relation->fetch_assoc();
    // 解码JSON字符串，这里用true转成关联数组（也可以不用，保持对象数组也行）
    $scheduleData = json_decode($ios_row['test'], true);
}

// 设置响应头为JSON格式，告诉前端返回的是JSON数据
header('Content-Type: application/json');
// 输出整理好的JSON数据
echo json_encode($scheduleData);
?>

第二步：修改前端控件初始化代码 #

现在前端需要通过AJAX请求后端的import.php获取数据，再把数据传给jqs控件。调整后的代码：

<script>
$(function () {
    // 发起AJAX请求获取日程数据
    $.ajax({
        url: 'import.php',
        type: 'GET',
        dataType: 'json',
        success: function(scheduleData) {
            // 初始化jqs控件，把获取到的日程数据传进去
            // 注意：这里的参数名要和jqs控件的文档一致，比如有的控件用`data`，有的用`events`
            $("#schedule3").jqs({
                data: scheduleData
            });
        },
        error: function(xhr, status, error) {
            // 如果请求失败，在控制台打印错误信息方便排查
            console.error('加载日程数据失败：', error);
        }
    });
});
</script>

额外排查要点 #

• 检查数据库连接：确保import.php里的$conn已经正确连接到数据库，没有连接错误
• 验证JSON格式：确认test表中存储的JSON字符串没有语法错误（比如逗号、引号是否正确）
• 查看网络请求：打开浏览器开发者工具的「网络」标签，看请求import.php时是否返回了正确的JSON数据，有没有404或500错误
• 对照控件文档：如果数据还是不显示，去jqs控件的官方文档确认数据参数的名称和格式要求，可能需要对数据做少量格式转换

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