基本ajax获取请求

Question

我正在制作一个带有 2 个链接的日历，一个用于返回一个月，另一个用于前进一个月。

这是我的 cal.php 文件：

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

我想做的是使用 jquery/ajax 更新 cal_wrapper div 内的内容，而无需刷新页面。我很努力地寻找，但找不到任何不使用 HTML 表单即可完成此操作的示例。我如何通过 GET 请求发送 2 个变量，月份和年份，应该是非常基本的..但是我会斗鸡眼试图在互联网上找到一些东西..

Answer 1

首先提供链接类，

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>";

然后每当单击其中一个链接时，将 ajax 请求的内容加载到包装器 div 中。

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

编辑您可以使用 .load 使用 #wrapper_div 加载页面片段，

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

因此将 cal_wrapper div 包装在 #wrapper_div 中，上面的代码将仅加载包装 div 的内容。使用实时而不是点击，因为您是动态插入链接。

Answer 2

只是纠正上面的答案。您需要使用 jquery 方法“live”，因为 cal_wrapper div 的内容会更改（每当您单击“下一个/上一个”链接时）

将下面的内容放在“主文件”中。第一次加载（在 onready 内）将加载第一个月和第一年。

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

还有你的 cal.php （删除其中的 div 标签）

<?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;
?>