javascript - 从数据库中获取数据到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 处理响应。您可能需要像 javascript 中的 var result = JSON.parse(data) 那样解析您的响应。

例如:

//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

之所以可以这样做是因为 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 的响应；