jquery - 从 URL 获取数据并用 HTML 显示

Question

我需要一些有关 jQueryy 的帮助。我正在构建一个侧边栏时间表，其中有一个“前一天”和一个“下一天”按钮。我想要的是，如果用户访问该网站，它将显示当天的结果(无需单击任何按钮)。但是，如果用户单击“下一个”或“上一个”，它将显示请求日期的结果。

数据是从/home/schedule/url 获取的。例如，如果网址为:/home/schedule/20130331，它将获取 3 月 31 日的日程注册情况。

我有这段代码，但是它当然不起作用。我不太擅长 jQuery，因此我们将不胜感激。

<div class="btn-group" style="padding-bottom:3px;">
  <a href="#" id="prev" class="btn">Previous Day</a>
  <a href="#" id="next" class="btn">Next Day</a>                
</div>
<div id="displayResults" name="displayResults"></div>

<script type="text/javascript">
$("#next, #prev").click(function(e){
    e.preventDefault();
    $.ajax({
        url: '{{ URL::base() }}/home/schedule/' + date,
        data: date,
        type: 'GET',
        success: function (data) {
            $('#displayResults').html(data);
        }
    });
});
</script>

Answer 1

最后:

HTML 前一天 明天 在 js fiddle 中你不会看到 url 发生任何变化

CSS

#displayResults {
    width: 300px;
    height: 200px;
    border: 1px solid;
    padding: 10px;
}

JS

var tm;//holds timer that checks changing of url
var date='';// holds the date
    $(document).ready(function(){

        getDateFromUrl();

        updateNextBack()

        tm=setInterval(function(){ // check that is the url changed
            var tmp;
            tmp=date;
            getDateFromUrl();
            if(date!=tmp){
                updateNextBack()
                changeDate();
            }
        },300);


        function updateNextBack(){// updates next and back links
            $('#next').attr('href','#'+nextDay(date));
            $('#prev').attr('href','#'+prevDay(date));
        }

        function getDateFromUrl(){//anallyse url
            var str=new String(document.location);
            date='';
            if(str.indexOf('#')>0){
                date=str.substr(str.indexOf('#')+1,str.length-str.indexOf('#'));
            }if(date==''){
                date='20130329';
            }
            date=addToDate(date,0);
        }

        function addToDate(md,i){// adds i to md and then return md
            var tmp=new String(md); // to get date in string format

            var day , month , year; // these will hold year month and day
            day=tmp.substr(6,2);
            month=parseInt(tmp.substr(4,2))-1;
            year=tmp.substr(0,4);
            var myDate=new Date();// create a date object and set its year month and day
            myDate.setFullYear(year);
            myDate.setMonth(month);
            myDate.setDate(day);

            myDate.setDate(myDate.getDate()+i); // adds i day to date
            md=''+myDate.getFullYear();
            md+=''+(myDate.getMonth()<9?'0':'');
            md+=''+parseInt(myDate.getMonth())-(-1);
            md+=''+(myDate.getDate()<10?'0':'');
            md+=''+parseInt(myDate.getDate());

            return md;
        }

        function nextDay(md){// you should write real function
            return addToDate(md,1);
        }

        function prevDay(md){// you should write real function
            return addToDate(md,-1);
        }

        $('#next').click(function(){// for clicking next
        // its empty !!!
        });

        $('#prev').click(function(){// for clicking prev
        // its empty !!!
        });

        function changeDate(){// uses $.get('filename',callbackfunc) to update div value related to date val
            /*$.get('getDate.php?d='+date,function(data){ // you should uncomment this when you are in server
                $('#displayResults').html(data);
            });*/

            //use this when in jsfiddle
            data='content of date:'+date;
            $('#displayResults').html(data);
        }

    });

Here工作 fiddle 。