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

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 数据

jquery mobile calender not get json data from server

php

jquery

json

jquery-ui

jquery-mobile