带回调的JSONP和GET——需要纠正错误的帮助

Question

这是我的JSONP文件:

<?php
   header('Content-type: application/javascript;');
header("access-control-allow-origin: *");
header("Access-Control-Allow-Methods: GET");
  //db connection detils
  $host = "localhost";
  $user = "test";
  $password = "test";
  $database = "myradiostation1";
  //make connection
  $server = mysql_connect($host, $user, $password);
  $connection = mysql_select_db($database, $server);
  //query the database
  $query = mysql_query("SELECT *, DATE_FORMAT(start, '%d/%m/%Y %H:%i:%s') AS start, 
                                   DATE_FORMAT(end, '%d/%m/%Y %H:%i:%s') AS end FROM radiostation1");
    //loop through and return results
  for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
    $row = mysql_fetch_assoc($query);
    $shows[$x] = array("id" => $row["id"], "startminutes" => $row["startminutes"], "start" => $row["start"], "endminutes" => $row["endminutes"],"end" => $row["end"],"mediumname" => $row["mediumname"], "longname" => $row["longname"], "description" => $row["description"],"short_id" => $row["short_id"],"promomessage" => $row["promomessage"],"email" => $row["email"],"phonenumber" => $row["phonenumber"],"textnumber" => $row["textnumber"],"textprefix" => $row["textprefix"],"showimage" => $row["showimage"],"longdescription" => $row["longdescription"],"facebooklink" => $row["facebooklink"],"otherlink" => $row["otherlink"],"websitelink" => $row["websitelink"],"keywords" => $row["keywords"] );     
  }
  //echo JSON to page
  $response = $_GET["callback"] . "(" . json_encode($shows) . ");";
  echo $response; 
?>

它做工作，在某种程度上，但得到{"success":true，"error":"，"data":{"schedule":如看到在这个网站之前我的json_encode是我在哪里。

然而，我不能让它在我的表中显示任何数据，尽管当我在http://www.myradio1.localhost/onairschedule.php上查看它时它确实在屏幕上产生代码。

实际代码存储在http://www.myradiostations.localhost/schedule.php

和回调函数工作正常，一个例子是http://www.myradiostations.localhost/schedule.php?callback=?&name=Northern+FM和http://www.myradiostations.localhost/schedule.php?callback=?&name=Southern+FM，但我需要做些什么，使其改变，就像在这些例子:这个示例和这个示例，如果不存在这样的文件，则生成如下错误消息。

我已经完成一半了，只是需要一些关于修复我的代码的建议!

基本上，我想做的是…得到一个JSONP在我的HTML表中工作，这将根据我的javascript文件在我的页面上的URL改变内容，这是:

var doFades = true;
var LocalhostRadioStations = {
  Schedule : {}
};
$(document).ready(function(){
  LocalhostRadioStations.Schedule.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  LocalhostRadioStations.Schedule.Show = function () {
    _s = null;
    _startDate = null;
    _endDate = null;
    this.days = LocalhostRadioStations.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();
    };
  };
  LocalhostRadioStations.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://www.myradiostations.localhost/schedule.php?callback=?&name=', {
          name: 'Northern FM'
        }, 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 LocalhostRadioStations.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 LocalhostRadioStations.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 LocalhostRadioStations.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 = LocalhostRadioStations.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');
            });
          }
        });

      }
    };
  }();

  LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);
});

它应该根据JSONP改变时间表，但是我该怎么做来修复它?

基本上，我试图使我自己的本地主机版本http://radioplayer.bauerradio.com/schedule.php?callback=&name=Rock+FM和它的JSON/JSONP(我不确定到底是什么类型的原始，但又一次，该网站是实验性的，并在一个。localhost域)的测试目的，其中的内容是从数据库中采取，并根据站名的变化，例如http://radioplayer.bauerradio.com/schedule.php?callback=&name=Metro+Radio和http://radioplayer.bauerradio.com/schedule.php?callback=&name=Forth+One等

编辑:我的页面的完整代码可以在http://pastebin.com/ENhR6Q9j看到

Answer 1

我不确定到底缺少什么，但是从您提供的代码到目前为止，我做了一个jsfiddle:

演示

我修改了一些东西，使其工作(主要追加的东西)，因为我不知道你的原始HTML文件。但我也根据你的要求做了些改变。首先，我修改了您的$.getJSON调用为:

$.getJSON('http://radioplayer.bauerradio.com/schedule.php?callback=?', {
          name: stationName //stationName is from the argument passed
        }, function(json){...})

根据传递给

的内容返回站点

LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);

为了使它更有趣，我还添加了一些从url读取的代码。在这种情况下，如果您转到具有domain.htm/page?Northern FM的页面，它将读取?之后的文本并将其放入twittiName。

var twittiName="Rock FM"; //default station
if(window.location.search){
   twittiName=window.location.search.substring(1)   //or window.location.hash
}

试着寻找其他可能在你的公众网站上的电台，但到目前为止我只能用"?Rock+FM"进行测试。但这意味着你可以显示错误，你的代码可以处理它。

• ?Rock+FM
• ?Random Name

所以似乎你的代码大部分工作，但做评论，如果我错过了什么。