基本的ajax获取请求

I'm making a calendar with 2 links, one to go back a month and the other to go forward a month.

This is my cal.php File:

<div class='cal_wrapper' id='cal'>
 <?php
   echo "<a href='cal.php?month=m&year=y'>Prev Month</a>";
   echo "<a href='cal.php?month=m&year=y'>Next Month</a>";

   echo $calendar;

 ?>
 </div>

What I'm trying to do is to use jquery/ajax to update the what's inside the cal_wrapper div without having to refresh the page. I've look hard but can't find any examples of getting this done without using an HTML form. How can I send 2 variables through a GET request, month and year, should be pretty basic..but I'm going cross eyed trying to find something on the internets..

First give your link classes

echo "<a class='month_selector' href='cal.php?month=m&year=y'>Prev Month</a>";
echo "<a class='month_selector' href='cal.php?month=m&year=y'>Next Month</a>";

Then load the contents of the ajax request into the wrapper div whenever one of those links has been clicked.

$('#cal_wrapper a.month_selector').live(function(e){
     $('#cal_wrapper').load( $(this).attr('href') ); 
     e.preventDefault(); 
}); 

EDIT you can use .load to load page fragments using the #wrapper_div

$('#cal_wrapper a.month_selector').live('click', function(e){
     $('#cal_wrapper').load( $(this).attr('href') + ' #wrapper_div' ); 
     e.preventDefault(); 
}); 

So wrap your cal_wrapper div in #wrapper_div and the code above will only load the contents of wrapper div. Use live instead of click since you are dynamically inserting the links.

Just correcting the answer above. You need to use the jquery method "live", because the content of the cal_wrapper div will change (whenever you click on 'next/prev' link)

Put the contents below in a "main file". The first load (inside onready) will load the first month and year.

<script type="text/javascript">

$(document).ready(function() {
    $('.call_wrapper').load('cal.php?month=m&year=y');

    $('.cal_wrapper a.pagination').live('click', function(){
        var link = $(this).attr('href');
        $('.cal_wrapper').load(link); 
        e.preventDefault();
    });
});

</script>

<div class='cal_wrapper' id='cal'></div>

And your cal.php (remove the div tag from inside it)

<?php
    echo "<a class="pagination" href='cal.php?month=m&year=y'>Prev Month</a>";
    echo "<a class="pagination" href='cal.php?month=m&year=y'>Next Month</a>";

    echo $calendar;
?>