Question

我尝试在我的系统中集成日历模板。在demo js文件中，示例事件的编写如下：

events: [
    {
        id: 1,
        title: 'Title 1',
        start: ('2016-01-02'),
        end: ('2016-01-05'),
        color: 'orange',
        url: 'http://google.com'
    },
    {
        id: 2,
        title: 'Title 2',
        start: ('2016-01-02'),
        end: ('2016-01-05'),
        color: 'orange',
        url: 'http://google.com'
    }

我需要从mysql获取这些数据。我写了php脚本，它以json格式给出了结果。但我不知道将结果加载到.js文件的方式。我知道这是一个简单的问题。谢谢你的时间。

以下是所有.js文件：

$(function() {
    // fullcalendar
    fullcalendar.calendar_selectable();
});

fullcalendar = {

    calendar_selectable: function() {
        var $calendar_selectable = $('#ajanda'),
            calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');

        var calendarColorPicker = helpers.color_picker(calendarColorsWrapper).prop('outerHTML');


        if($calendar_selectable.length) {
            $calendar_selectable.fullCalendar({
                header: {
                    left: 'title today',
                    center: '',
                    right: 'month,agendaWeek,agendaDay prev,next'
                },
                buttonIcons: {
                    prev: 'md-left-single-arrow',
                    next: 'md-right-single-arrow',
                    prevYear: 'md-left-double-arrow',
                    nextYear: 'md-right-double-arrow'
                },
                buttonText: {
                    today: ' ',
                    month: ' ',
                    week: ' ',
                    day: ' '
                },
                aspectRatio: 2.1,
                defaultDate: moment(),
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                    UIkit.modal.prompt('' +
                        '<h3 class="heading_b uk-margin-medium-bottom">Etkinlik Ekle</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
                        'Etkinlik Rengi:' +
                        calendarColorPicker +
                        '</div>' +
                        'Etkinlik:',
                        '', function(newvalue){
                            if($.trim( newvalue ) !== '') {
                                var eventData,
                                    eventColor = $('#calendar_colors_wrapper').find('input').val();
                                eventData = {
                                    title: newvalue,
                                    start: start,
                                    end: end,
                                    color: eventColor ? eventColor : ''
                                };

                                //kaydediyorum
                                var datastring='do=kayit&title='+eventData.title+'&start='+(eventData.start)+'&end='+(eventData.end)+'&color='+(eventData.color);

                                $.ajax({
                                    type: "POST",
                                    data: datastring,
                                    url: "script/ajax_calendar.php",
                                    dataType: "html"
                                });

                                $calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
                                $calendar_selectable.fullCalendar('unselect');
                            }
                        }, {
                            labels: {
                                Ok: 'Kaydet'
                            }
                        });
                },
                editable: true,
                eventLimit: true,
                timeFormat: '(HH)(:mm)',
                events: [
                    {
                        title: 'Tüm Gün Aktivitesi',
                        start: ('2016-01-01')
                    },
                    {
                        id: 1,
                        title: 'Uzun Aktivite',
                        start: ('2016-01-02'),
                        end: ('2016-01-05'),
                        color: 'orange',
                        url: 'http://google.com'
                    },
                    {
                        id: 1,
                        title: 'Saatli olan',
                        start: ('2016-01-07 15:00'),
                        color: 'brown'
                    },
                    {
                        id: 999,
                        title: 'Tekrarlayan Aktivite',
                        start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
                        color: '#689f38'
                    },
                    {
                        id: 999,
                        title: 'Tekrarlayan Aktivite',
                        start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
                        color: '#689f38'
                    },
                    {
                        title: 'Konferans',
                        start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
                        end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
                    },
                    {
                        title: 'Meeting',
                        start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
                        color: '#7b1fa2'
                    },
                    {
                        title: 'Lunch',
                        start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
                        color: '#d84315'
                    },
                    {
                        title: 'Meeting',
                        start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
                        color: '#7b1fa2'
                    },
                    {
                        title: 'Happy Hour',
                        start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
                    },
                    {
                        title: 'Dinner',
                        start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
                    },
                    {
                        title: 'Birthday Party',
                        start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
                    },
                    {
                        title: 'NEW RELEASE (link)',
                        url: 'http://themeforest.net/user/tzd/portfolio',
                        start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
                        color: '#0097a7'
                    }
                ]
            });
        }
    }
};

Answer 1

你可以试试这个：

$(document).ready(function () {
            var = 'test';
            $.ajax({
                type: "POST",
                url: "yourservice.php",
                data: {
                    var: var
                },
                success: function (response) {
                    console.log(response);
                    var decodedJson = JSON.parse(response);
                    console.log(decodedJson);
                }
            });
});

Answer 2

最简单的方法是更改php脚本，将JSON数据输出为js变量。

// output the data like this
header("Content-Type: application/javascript"); 
$data =  json_encode($data_array);
echo "var events_json = $data;";
exit;

然后在您的网页中将PHP脚本作为javascript包含在主代码上方。

<script src="myScript.php"></script>

然后你可以在主javascript中使用变量名而不加载任何异步。

events: events_json

通过ajax将json数据加载到.js文件中

2 个答案: