Question

我有这个日历插件，它会在cal.js文件中选择json文件

var calEvents = [
{"icon": "bars","eid":"1","title":"My event test","url":"#","start":new Date("2014-02-10T08:00:00.000Z"),"end":new Date("2014-02-10T10:00:00.000Z"),"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":" 1","title":"My event test","url":"#","start":new Date("2014-02-10T17:00:00.000Z"),"end":new Date("2014-02-10T18:00:00.000Z"),"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"someID 1","title":"My event 1","url":"#","start":date1,"end":date1,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"icon": "info","eid":"2","title":"Event testing 2","url":"#","start":new Date("2015-04-03 18:54:00.000000"),"end":date3,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"SomeID 3","title":"My event 3","url":"#","start":date4,"end":date4,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"icon": "alert","eid":"SomeID 4","title":"My event 4","url":"#","start":date5,"end":date6,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"SomeID 5","title":"Just testing the calendar","url":"http://www.example.com","start":date7,"end":date7,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"SomeID 6","title":"My event 6","url":"#","start":date8,"end":date8,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"SomeID 7","title":"My event 7","url":"#","start":date9,"end":date9,"discription":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
];
   $("#calendar").jqmCalendar({
      events : calEvents,
      months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      startOfWeek : 1
   });

我用php生成了json文件，我试着用这个调用php json文件。

var calEvents = "http://localhost/indicium/admin/data/app-calender.php";

但它似乎没有起作用。

如何正确调用php json？

Answer 1

要做到这一点，您需要使用一个名为AJAX的概念。 JQuery有一些内置的方法来简化AJAX。

这是一个非常简单的JQuery示例，它从jsonplaceholder.typicode.com检索JSON对象并将其显示在屏幕上。

var root = 'http://jsonplaceholder.typicode.com';

$.ajax({
    url: root + '/posts/1',
    method: 'GET'
}).then(function(data) {
    $('.output').html('<pre>' + JSON.stringify(data) + '</pre>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>The following object is loaded from a remote server...</p> 
<div class="output"></div>

您的代码看起来像这样......

var root = 'http://localhost/indicium/admin/data/app-calender.php';

$.ajax({
    url: root,
    method: 'GET'
}).then(function(data) {
    initCalendar(data);
});

function initCalendar(data) {
  $("#calendar").jqmCalendar({
      events : data,
      months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      startOfWeek : 1
   });
}

文档：

JQuery .ajax
JQuery .getJSON (Short hand for .ajax)

jquery移动日历不从服务器获取json数据

1 个答案: