这是我的 PHP 页面,index.php 在名为 testradio1 的 localhost 子文件夹中:
<link rel="stylesheet" href="http://www.tfmradio.co.uk/layout/widget/LargeScheduleWidget/css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
var doFades = true;
var BauerStations = {
Schedule : {}
};
$(document).ready(function(){
BauerStations.Schedule.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
BauerStations.Schedule.Show = function () {
_s = null;
_startDate = null;
_endDate = null;
this.days = BauerStations.Schedule.days;
_selector = '';
this.setShow = function(s) {
this._s = s;
this._startDate = new Date( parseInt(s.startminutes, 10) * 1000);
this._endDate = new Date(parseInt(s.endminutes, 10) * 1000 );
};
this.getEndDate = function(){
return this._endDate;
}
this.getStartDate = function(){
return this._startDate;
}
this._getShowDay = function (){
return this.days[this.getStartDate().getDay()];
};
this._getShowUnitsTaken = function(){
// if it's the same day
return this._getEndUnits() - this._getStartUnits();
};
this._getEndUnits = function(){
if(this.getEndDate().getHours() == 0)
{
//console.log(this._s.longname +' ends at midnight');
return 48;
}
return this.getEndDate().getMinutes() !== 0 ? (this.getEndDate().getHours() * 2) : (this.getEndDate().getHours() * 2);
};
this._getStartUnits = function(){
if(this.getStartDate().getHours() == 0)
{
return 0;
}
return this.getStartDate().getMinutes() !== 0 ? (this.getStartDate().getHours() * 2) : (this.getStartDate().getHours() * 2);
};
this.getCellPositions = function() {
return {
'start' : this.getStartDate(),
'end' : this.getEndDate(),
'colIndex' : this.getStartDate().getDay() + 2,
'startUnits' : this._getStartUnits(),
'endUnits' : this._getEndUnits(),
'unitsTaken' : this._getShowUnitsTaken()
}
};
this.pad = function(number){
return number < 10 ? '0'+number : number;
};
// return the table cell html.
this.toHtml = function () {
var d = new Date();
var units = this._getStartUnits();
var rowspan = this._getShowUnitsTaken();
var desc = this._s.description;
var name = this._s.longname;
var starttime = this.pad(this.getStartDate().getHours()) + ':' + this.pad(this.getStartDate().getMinutes());
var endtime = this.pad(this.getEndDate().getHours()) + ':' + this.pad(this.getEndDate().getMinutes());
var site = this._s.websitelink;
var cls = this.isActive() ? 'current-program' : '';
var isToday = this.getStartDate().getDay() === d.getDay() ? 'active-program' : '';
var html = '<td class="schedule-show ' + isToday + ' ' + cls + '" rowspan="' + rowspan + '" data-start="' + this.getStartDate() + '" data-end="' + this.getEndDate() + '">';
html += '<div>';
html += '<a href="' + site + '" title="' + desc + '">' + name + '</a>';
html += '</div>';
if(doFades)
{
html += '<div class="schedule_details clearfix" style="display:none;">';
html += '<img width="105px" height="105px" alt="' + desc + '" src="' + this._s.showimage + '">';
html += '<strong>' + name + '</strong>';
html += '<p>' + desc + '</p>';
html += '<span>' + starttime + ' - ' + endtime +'</span>';
html += '</div>';
}
html += '</td>';
return html;
};
this.setTableSelector = function(sel){
this._selector = sel;
};
// check if we should add the active class.
this.isActive = function(){
var t = new Date();
return t >= this.getStartDate() && t <= this.getEndDate();
};
};
BauerStations.Schedule.ScheduleGen = function(){
return {
insertShow : function(show) {
var p = show.getCellPositions();
$('tr#units-' + p.startUnits).append(show.toHtml());
},
init : function (stationName){
var self = this;
// load the schedule.
$.getJSON('http://127.0.0.1/radio1/schedule.php?callback=?', {
name: 'MyStation'
}, function(json){
// loop each show and append to our giant table.
// this is well sick.
if(json.success === false)
{
$('.content-inner table').remove();
$('<div>errors</div>').appendTo('.content-inner');
}
else
{
var currentDay = '';
var day = 0;
// highlight the current time..
var d = new Date();
var weekStart = new Date();
weekStart.setDate(d.getDate()-6-(d.getDay()||7));
$.each(json.data.schedule, function(i, broadcast){
var dStart = new Date( parseInt(broadcast.startminutes, 10) * 1000);
var dEnd = new Date(parseInt(broadcast.endminutes, 10) * 1000 );
/*// transform to a show object defined above, if the show spans 2 days we create two show objects.
// IF THE SHOW STARTS/ENDS AT MIDNIGHT, DON'T SPLIT IT.
if(dStart.getHours() !== 0 && dEnd.getHours() !== 0 && dStart.getDate() != dEnd.getDate())
{
var showOne = new BauerStations.Schedule.Show();
showOne.setShow(broadcast);
// set to midnight
showOne.getEndDate().setHours(0);
showOne.getEndDate().setMinutes(dStart.getMinutes());
// append first half of show.
self.insertShow(showOne);
// handle second half.
var showTwo = new BauerStations.Schedule.Show();
showTwo.setShow(broadcast);
showTwo.getStartDate().setDate(showTwo.getStartDate().getDate() + 1);
showTwo.getStartDate().setHours(0);
showTwo.getStartDate().setMinutes(dEnd.getMinutes());
//console.log('2nd Half Start: ' + showTwo.getStartDate());
//console.log('2nd Half End: ' + showTwo.getEndDate());
self.insertShow(showTwo);
}
else
{*/
var show = new BauerStations.Schedule.Show();
show.setShow(broadcast);
show.setTableSelector('table#schedule');
// add the show to the table. Thankfully the order these come out the API means they get added
// in the right place. So don't change the schedule builder code!
self.insertShow(show);
//}
});
var days = BauerStations.Schedule.days;
// apply the current day / time classes
$('th:contains('+ days[d.getDay()]+')').addClass('active');
$('td.time').each(function(i, cell){
// get the value, convert to int.
var hours = $(cell).html().split(':')[0];
// compare the hours with now, add class if matched.
if(parseInt(hours, 10) === d.getHours())
{
$(cell).addClass('current_time');
}
});
}
if(doFades)
{
// apply events to show info fade in / out.
$('td.schedule-show').hover(function(){
$(this).find('.schedule_details').fadeIn('fast');
}, function(){
$(this).find('.schedule_details').fadeOut('fast');
});
}
});
}
};
}();
BauerStations.Schedule.ScheduleGen.init();
});
</script>
<!-- ============================================= END Navigation =============================================-->
<div class="content-inner">
<div class="row">
<div class="column size-10">
<div class="large-schedule-widget main-col main-col-large widgetbox">
<table class="schedule-table">
<!-- column headers -->
<thead>
<tr>
<th class="hide">Units</th>
<th>Hours</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr id="units-0">
<td class="hide">0</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">00:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-1">
<td class="hide">1</td>
<!-- Every other row echo an hour block -->
</tr>
<!-- echo a row for each of the 48 units -->
<tr id="units-2">
<td class="hide">2</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">01:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-3">
<td class="hide">3</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-4">
<td class="hide">4</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">02:00</td>
</tr>
<tr id="units-5">
<td class="hide">5</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-6">
<td class="hide">6</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">03:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-7">
<td class="hide">7</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-8">
<td class="hide">8</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">04:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-9">
<td class="hide">9</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-10">
<td class="hide">10</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">05:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-11">
<td class="hide">11</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-12">
<td class="hide">12</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">06:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-13">
<td class="hide">13</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-14">
<td class="hide">14</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">07:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-15">
<td class="hide">15</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-16">
<td class="hide">16</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">08:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-17">
<td class="hide">17</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-18">
<td class="hide">18</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">09:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-19">
<td class="hide">19</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-20">
<td class="hide">20</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">10:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-21">
<td class="hide">21</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-22">
<td class="hide">22</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">11:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-23">
<td class="hide">23</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-24">
<td class="hide">24</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">12:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-25">
<td class="hide">25</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-26">
<td class="hide">26</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">13:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-27">
<td class="hide">27</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-28">
<td class="hide">28</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">14:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-29">
<td class="hide">29</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-30">
<td class="hide">30</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">15:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-31">
<td class="hide">31</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-32">
<td class="hide">32</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">16:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-33">
<td class="hide">33</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-34">
<td class="hide">34</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">17:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-35">
<td class="hide">35</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-36">
<td class="hide">36</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">18:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-37">
<td class="hide">37</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-38">
<td class="hide">38</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">19:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-39">
<td class="hide">39</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-40">
<td class="hide">40</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">20:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-41">
<td class="hide">41</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-42">
<td class="hide">42</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">21:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-43">
<td class="hide">43</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-44">
<td class="hide">44</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">22:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-45">
<td class="hide">45</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-46">
<td class="hide">46</td>
<!-- Every other row echo an hour block -->
<td class="time" rowspan="2">23:00</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-47">
<td class="hide">47</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
<tr id="units-48">
<td class="hide">48</td>
<!-- start polling days -->
<!-- finish echo a row for each of the 48 units -->
</tr>
</tbody>
</table>
</div> <!-- end .main-col -->
</div>
这是来自 radio1 目录的 JSON 文件,名为 schedule.php:
<?php
header('Content-Type: application/json; charset=utf-8');
$link = mysql_pconnect("localhost", "testing", "test") or die("Could not connect");
mysql_select_db("radio1") or die("Could not select database");
$arr = array();
$rs = mysql_query("SELECT * FROM schedule1");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo '{"success":true,"error":"","data":{"schedule":['.json_encode($arr, $obj).']}}';
?>
JSON 可以很好地显示为单个文件,但我无法模拟在 此站点和此站点上看到的效果。我正在尝试这样做:错误消息显示在 php / JSON 中,但遇到了一些麻烦。
我已经成功将 MySQL 数据转换为 JSON。
我正在使用受版权保护的材料,但仅用于非商业、教育目的,尽管我已经在某种程度上使用 JSON 工作(我几乎可以做基本的 json_encode)。
我怎样才能有效地解决这个问题?所有帮助将不胜感激。
我同时使用 WAMP 和 MAMP,一台装有 Windows 7 的机器,一台装有 Mac OS X 10.6.8 的机器,这是一个测试站点。
我希望我已经为您解释得足够好,我已经尝试自己学习这一点,但需要一些帮助。