Получить данные из массива БД в 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 REQUEST на ваш серверный скрипт. Ваши серверные сценарии запрашивают базу данных, обрабатывают ваши данные и возвращают ответ на ваш запрос ajax. Попробуйте сделать это с echo json_encode($array_values) в Php. Оттуда вы можете обработать ответ, используя javascript в вашем запросе ajax. Возможно, вам придется проанализировать ваш ответ примерно так var result = JSON.parse(data) в 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();
?>

2. Другой способ - это когда вы делаете вызовы на стороне сервера с Php внутри вашего HTML. В каком случае:

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

3. Наконец, вы также можете вставить HTML в Php. Который будет:

    <?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);

1034 ** или 1036 **

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

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);
            }
        });
}