完整的日历外部事件列表
我正在尝试使用div标记内部的PHP将所有在开始日期具有空值的事件加载到我的外部事件列表中，可以做到这一点。
Unassigned.php
prepare($query); $statement->execute(); ?> 然后在我的html文件中Draggable Events
fetch()): ?>
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
阿里云 AI 助理回答
要将从数据库获取的事件数据以JSON格式传递到HTML，并在页面上动态生成列表项，你可以采用以下步骤：
- 修改PHP脚本以输出JSON数据：你已经正确地准备了查询、执行并获取所有结果，然后将它们编码为JSON。确保这个PHP文件（假设是
unassigned.php）只负责生成和输出JSON数据，不包含任何HTML。
<?php
// ... 连接数据库等代码 ...
$query = "SELECT Job, Customer, date_assigned FROM your_table WHERE start_date IS NULL"; // 假设字段名和条件
$statement = $pdo->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
foreach ($result as $row) {
$data[] = array(
'id' => $row["Job"],
'title' => $row["Customer"],
'start' => $row["date_assigned"]
);
}
echo json_encode($data);
exit; // 确保只输出JSON数据，无其他输出
?>
- 使用JavaScript获取JSON数据并动态创建列表项：在你的HTML文件中，使用JavaScript的
fetch函数来获取上述PHP脚本返回的JSON数据，然后遍历这些数据来动态创建列表项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Events</title>
<!-- 引入jQuery或原生JavaScript库，如果需要 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="external-events">
<h4>Draggable Events</h4>
<ul id="eventList"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('unassigned.php')
.then(response => response.json())
.then(data => {
const eventList = document.getElementById('eventList');
data.forEach(event => {
const listItem = document.createElement('li');
listItem.setAttribute('class', 'fc-event');
listItem.textContent = `${event.title} - ${event.start}`;
// 如果需要，可以在这里添加更多属性，如data-id="${event.id}"
eventList.appendChild(listItem);
});
})
.catch(error => console.error('Error fetching events:', error));
});
</script>
</body>
</html>
这段代码首先等待文档加载完成，然后使用fetch异步请求unassigned.php获取JSON数据。一旦数据被解析，它会遍历这些事件，为每个事件创建一个新的<li>元素，并将其添加到ID为eventList的<ul>中。这样，你就可以动态生成一个包含所有未分配事件的列表，且每个列表项都携带了相应的事件信息。
有帮助
无帮助
AI 助理回答生成答案可能存在不准确，仅供参考
相关问答