通過ajax將json數據加載到.js文件中

Question

我嘗試將日曆模板集成到我的系統中。 在演示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

最簡單的方法是改變你的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 

Answer 2

你可以試試這個：

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