使用 JQuery 在 fullcalendar 中保存事件不起作用

Question

我想将事件保存到数据库，但是我可以将事件添加到日历，但它不会保存到数据库，当我尝试刷新页面时，事件消失了。

这是我的索引页

eventRender: function (event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }
    },
    //changes made start 
   selectable: true,
    selectHelper: true,
    //editable: true,
   select: function (start, end, allDay) {
       var title = prompt('Event Detail:');

        if (title) {
             var start = $.fullCalendar.moment(start);
     var end = $.fullCalendar.moment(end);
     console.log("Event Triggered");
            //start = moment(start).format('YYYY/MM/DD');
        //end = moment(end).format('YYYY/MM/DD');
           // var start =  $.formatDate(start, "Y-MM-DD");
           //var end =  $.formatDate(end, "Y-MM-DD");
           //var time = $.formatTime(time, "HH:mm:ss");

            $.ajax({
                url: 'add_event.php',
                data:'title='+ encodeURIComponent(title)+
                   '&start='+ encodeURIComponent(start)+
                   '&end='+ encodeURIComponent(end),
                   //'&url='+ encodeURIComponent(url),
                type: "POST",
                dataType: 'text',
                success: function(json) {
                    alert("Added Successfully");
                  //  alert(json);                   
                  },
              error: function(xhr, textStatus, errorThrown) {
                 alert(xhr.responseText);
            }
            });

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

这是我将事件添加到数据库的页面

$data = $_POST;

$json_array["title"]=json_decode($data["title"], true);
$json_array["start"]=json_decode($data["start"], true);
$json_array["end"]=json_decode($data["end"], true);

$title =$json_array["title"];
$start =$json_array["start"];
$end = $json_array["end"];

 require_once "config.php";

try 
 {
$pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username,   $password);
// set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// prepare sql and bind parameters

$sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':title', $title);
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->execute();

echo "New records created successfully";
}
 catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$pdo = null;

非常感谢任何帮助

Answer 1

那么，当你添加一个新事件时，数据实际上是保存在数据库中的吗？

如果我正在查看代码，您似乎将 AJAX 调用作为 POST 发送，但将数据作为 GET 格式发送，虽然这可能有效，但以这种方式发送数据可能更好：

$(document).ready(function () 
{
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay,month'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true,
        minTime: '13:00:00', /* calendar start Timing */
        maxTime: '24:00:00',  /* calendar end Timing */
        defaultView: 'agendaWeek',
        events: "all_events.php",
        displayEventTime: false,
        eventRender: function (event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },
        //changes made start 
        selectable: true,
        selectHelper: true,
        //editable: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Detail:');

            if (title) {
                var dbstart = $.fullCalendar.moment(start).format();
                var dbend = $.fullCalendar.moment(end).format();
                console.log("Event Triggered");
                console.log(dbstart);
                console.log(dbend);
                //start = moment(start).format('YYYY/MM/DD');
                //end = moment(end).format('YYYY/MM/DD');
                // var start =  $.formatDate(start, "Y-MM-DD");
                //var end =  $.formatDate(end, "Y-MM-DD");
                //var time = $.formatTime(time, "HH:mm:ss");

                $.ajax({
                    url: 'add_event.php',
                    data: {
                        title: title,
                        start: dbstart,
                        end: dbend
                        //url: url
                    },
                    type: "POST",
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == "success") {
                            alert("Added Successfully");
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: response.title,
                                    start: response.start,
                                    end:   response.end,
                                    allDay: response.allDay
                                },
                                true //make the event stick 
                            );
                        } else {
                            alert("Error occurred. Check Console.");
                            console.log(response.error);
                            //  alert(json);                
                        }
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert(xhr.responseText);
                    }   
                });
                calendar.fullCalendar('unselect');
            }
        }
    });
});

那么，你的 add_event.php 将有：

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

require_once "config.php";

try 
{
    $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username,   $password);
    // set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // prepare sql and bind parameters

    $sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':start', $start);
    $stmt->bindParam(':end', $end);
    $stmt->execute();

    $id = $pdo->lastInsertId();
    $output['status'] = "success";
    $output['insert_id'] = $id;
    $output['title'] = $title;
    $output['start'] = $start;
    $output['end'] = $end;
}
catch(PDOException $e)
{
    // had errors
    $errors = $stmt->errorInfo();
    $output['status'] = "error";
    $output['error'] = $e->getMessage();
}
$pdo = null;

echo json_encode($output);

这会将一些输出返回到您的页面，这样您就可以看到传递到脚本中并用于输入数据库的内容。我还更新了您的 Ajax 调用，仅在成功输入数据库时​​更新日历，并使用从函数返回的值进行更好的验证。

但是，在生产中，应该删除一些错误输出。

Answer 2

config.php 应包含您的凭据，例如：

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

在数据库中插入新行的脚本应该是：

ini_set('display_errors', 1); 
ini_set('log_errors',1); 
error_reporting(E_ALL); 

$data = $_POST;

$json_array["title"]=json_decode($data["title"], true);
$json_array["start"]=json_decode($data["start"], true);
$json_array["end"]=json_decode($data["end"], true);

$title =$json_array["title"];
$start =$json_array["start"];
$end = $json_array["end"];

require_once "config.php";

try 
{
    $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// prepare sql and bind parameters

    $sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':start', $start);
    $stmt->bindParam(':end', $end);
    $stmt->execute();

    echo "New records created successfully";
}
catch(PDOException $e)
{
    echo "Error: " . $e->getMessage();
}
$pdo = null;