我仍然是一个新程序员，我在让这段代码工作时遇到问题（我从here）。它使用MySQL来存储数据。我想了解其中的各个部分，但我现在才真正开始了解 ajax 和 jQuery 如何协同工作。
它用于显示数据，它依赖于“events.php”。我已经单独运行它，它生成的 JSON 应该可以在日历中显示，所以我知道 SQL 工作正常，但它不会显示在主页上。库、CSS 等的路径已更改，但插入 MySQL 表的功能运行良好...所以我可以使用它来插入日期，但一旦插入，它们就不会显示在刷新。
编辑：已解决。据我所知，这是三个问题的组合：(1) - 确保返回的 JSON 没有围绕“false”的引号。 (2) 确保你有jquery.min.map。 （这是通过查看 Chrome 的调试器发现的），以及 (3) 我无法使用该文件的路径...我只是将其称为“events.php”。感谢所有提供帮助的人！
这是下面的 html...下面是 JSON。我看过其他几篇从未有过解决方案的帖子，所以显然，任何帮助都非常感谢：
<!DOCTYPE html>
<html>
<head>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost/tpsdb/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
events.php 页面生成的 JSON：
[{"id":"7","title":"test","start":"2014-02-05 00:00:00","end":"2014-02-05 00:00:00","url":"","allDay":"false"},{"id":"8","title":"Title 2","start":"2014-02-06 00:00:00","end":"2014-02-06 00:00:00","url":"","allDay":"false"},{"id":"9","title":"Feb 1","start":"2014-01-28 00:00:00","end":"2014-01-28 00:00:00","url":"","allDay":"false"}]
下面是创建 JSON 的 PHP，以按照正确的格式去除引号（true 不会出现在我的 JSON 字符串中）。
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM evenement ORDER BY id";
// connection to the database
include ("../includes/functions.php");
// Execute the query
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// sending the encoded result to success page
$tempjson = json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
$tempjson = str_replace('"false"', 'false', $tempjson);
echo $tempjson;
?>
我的传奇中的更多信息 - 是否可以帮助那些追随我脚步的人：显然提供的库不包括 jquery.min.map （我还没有研究它是什么）。感谢您询问有关 Chrome 中的 f12 控制台的问题。我发现 min.map 丢失了。但仍然没有帮助我:( 工作......
Here is the screen shot of Chrome's viewer.
尝试替换：
events: "http://localhost/tpsdb/fullcalendar/events.php",
with:
eventSources: [
{
url: 'http://localhost/tpsdb/fullcalendar/events.php',
type: 'GET',
data: {},
error: function () {
alert('There was an error while fetching events!');
}
}
],