php - 使用ajax将事件添加到mysql数据库

Question

我无法添加通过弹出框输入的事件标题。

我有这个 jquery 代码，我在其中放置了我的 ajax 代码:

 $(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,
        events: "http://localhost/test/events.php",
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
         var title = prompt('Event Title:');
         if (title) {

         /*
         start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
         end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
         $.ajax({
         url: 'http://localhost/test/add_events.php',
         data: 'title='+ title+'&start='+ start +'&end='+ end ,
         type: "POST",
         success: function(json) {
         alert('OK');
         }
         });
         */

         calendar.fullCalendar('renderEvent',
         {
         title: title,
         start: start,
         end: end,
         allDay: allDay
         },
         true // make the event "stick"
         );
         }
         calendar.fullCalendar('unselect');
        }
    });

});

然后我有这个 add_events.php，其中写入插入查询

    <?php

    $title=$_POST['title'];
    $start=$_POST['start'];
    $end=$_POST['end'];

    // connect to the database
     try {
     $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
     } catch(Exception $e) {
     exit('Can not connect to the database.');
     }

    $sql = "INSERT INTO evenement (title, start, end) VALUES (:title, :start, :end)";
    $q = $bdd->prepare($sql);
    $q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));
    ?>

我评论了 default.html 中的代码片段，因为我认为这就是问题所在。当我评论此代码片段时，我可以通过弹出框添加事件，并在确认事件标题后，事件标题将在我的 fullCalendar 中清晰可见(但尚未添加到数据库中)。但是，如果我“取消注释”该部分，通过弹出框输入的事件标题不会出现在我的 fullCalendar 中(显然，它尚未添加到我的数据库中)

有人可以帮我编辑我的ajax代码，以便我可以使通过弹出框输入的事件标题出现在我的fullCalendar中并成功添加到我的数据库中。

提前致谢!

Answer 1

我认为您的错误在于您的 Ajax 调用以及您在调用后设置数据的方式。

您的数据属性应如下所示:

var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
var title = "Title name";
$.ajax({
   url: 'http://localhost/test/add_events.php',
   data: {
      title: title, 
      start: start,
      end: end
   },
   type: "POST",
   success: function(json) {
      alert('OK');
   }
});