从 db 获取数据到 js 数组

Question

所以我正在创建一个包含日历的页面，并且我想将我在不同页面上插入到数据库中的事件显示出来

如何在日历上显示事件？

这是模板自带的js代码（我的js技能不多）

我认为它显示事件的部分是在“事件：[...] 但我不知道如何从数据库中获取数据

var initCalendar = function() {
    var $calendar = $('#calendar');
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },

        timeFormat: 'h:mm',

        titleFormat: {
            month: 'MMMM YYYY',      // September 2009
            week: "MMM d YYYY",      // Sep 13 2009
            day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
        },

        themeButtonIcons: {
            prev: 'fa fa-caret-left',
            next: 'fa fa-caret-right',
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'fc-event-danger'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

我还没有创建数据库表，但我知道如何创建它。

Answer 1

有很多方法可以实现这一目标。

1. 最好和最简单的方法是将 AJAX 请求 发送到您的服务器端脚本。您的服务器端脚本查询数据库，处理您的数据并返回对您的 ajax 请求的响应。考虑在Php 中使用echo json_encode($array_values) 执行此操作。从那里您可以在 ajax 请求中使用 javascript 处理响应。您可能需要像 var result = JSON.parse(data) in javascript 那样解析您的回复。

例如：

//Within Your HTML Script
axios({
  method: 'POST', //you can set what request you want to be
  url: 'getdb.php',
  data: {id: 1},
})
.then(function (response) {
  // Server side response
  var result = JSON.parse(response.data);
  console.log(result );
})
.catch(function (error) {
  console.log(error);
});

//getdb.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$array_values = array();
// output data of each row
while($row = $result->fetch_assoc()) {
   $array_values[] = $row;
};
echo json_encode($array_values)
$conn->close();
?>

1. 另一种方法是当您在HTML 中使用Php 进行服务器端调用时。在这种情况下：

    <script>
      var result = JSON.parse(JSON.stringify("<?php echo json_encode($array_values)?>"));
    </script>

1. 最后，您也可以在Php 中嵌入HTML。这将是：

    <?php
     echo "<script>var result = JSON.parse(JSON.stringify('json_encode({$array_values})'))</script>"
    ?>

您的服务器端脚本的响应是这样的：

$array_values = array('header' => 
                           array('left' => 'title', 'right' => 'prev,today....'),
                      'timeFormat' => 'h:mm',
                      .....,
                      'events' => array(
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                       )

                )
echo json_encode($array_values );

然后在您的 javascript 中，您可以执行以下操作：

var result = JSON.parse(response.data);
$calendar.fullCalendar(result);

或

//independently change each property without affecting others
var result = JSON.parse(response.data);
$calendar.fullCalendar().header= result.header;
$calendar.fullCalendar().timeFormat= result.timeFormat;
$calendar.fullCalendar().events= result.events;

//$calendar.fullCalendar() function is simply accepting an object as a parameter

之所以可以这样做是因为 SERVER SIDE RESPONSE 之后的 javascript 变量结果现在看起来像这样：

result = {
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },
        timeFormat: 'h:mm',
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
        }

这显然取决于您如何构建您对 Php 的响应；

Answer 2

使用 jquery ajax 函数获取数据。

    events: function(start, end, timezone, callback) {
jQuery.ajax({
            url: 'abc.php',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(responce) {
                var events = responce.bookingData;
                callback(events);
            }
        });
}