根据使用 ajax 的按钮传递的值更新 div答案

【问题标题】：update div based on value passed with a button using ajax根据使用 ajax 的按钮传递的值更新 div
【发布时间】：2021-10-15 18:46:19
【问题描述】：

我正在使用 php 显示日历服务器端。现在我想用 2 个按钮 (>) 滚动月份而不重新加载整个页面。有很多问题和示例，我发现一些非常接近表单的内容，但是，我还没有真正理解如何将其调整为按钮。

传递请求新数据的一个非常简单的脚本是

<script>
$(document).ready(function(){
    $("moveCal").click(function(){
        $("#calendar").load("/presentation/cal.php");
    });
});
</script>

php 之前尝试再请求一个月看起来像这样

  
 echo '<span onclick="updateCal(\''.$toMonth->format('mY').'\')">';
echo '<span class="calendar_month_link">   '.$toMonth->format('M').' &gt</span></span>';

但是如何将updateCal() 函数与$(document).ready(function(){ 连接起来？

还有一件事我有点困惑：如果我不使用存储在 cookie 中的会话 ID，应用程序服务器仍然只为请求的 IP 提供请求的日期，对吗？其他同时用户可以选择其他日期显示吗？

【问题讨论】：

标签： php html jquery ajax

【解决方案1】：

您可能想要更多细节，但这里是它的要点：

用户访问一个网页，地址指向一个 PHP 文件 - PHP 文件在服务器上运行。它每个请求运行一次，因此输出只会提供给请求者。如果文件是静态的，或者如果它总是产生相同的 HTML 输出 - 它对每个人都是一样的。

在您的情况下，听起来您至少需要一个 month 变量，也可能需要一个 year 变量。当请求带有变量（如$('#calendar').load('/presentation/cal.php?month=10&year=2021')）时，您可以使用变量值来更改输出。由于变量来自请求，因此输出将特定于传递的变量 - 因此站点上的每个用户都可以发送不同的请求并且都看到唯一的输出。

在上面的示例中，月份和年份是通过 GET 传递的（即，它们被附加到 URL 中，而不是在表单中或通过像 $.post('cal.php', {month: 10, year: 2021}, function(responseData) { /*...*/ }); 这样的 POST AJAX 传递）。

PHP 又具有$_GET 和$_POST 数组来分别保存通过GET 和POST 方法传递的参数。因此，在请求的 PHP 文件 (cal.php) 中，您可以使用 $_GET['month'] 和 $_GET['year'] 访问请求的月份和年份。您需要检查它们是否存在于请求中，如果不存在，请使用默认值。如果它们在请求中，您需要验证它们是否是合法值，如果不是，请使用默认值（或向用户发送错误消息）。

所以伪代码可能看起来像：

cal.php

<?php
  $defaultMonth = date("n");
  $defaultYear = date("Y");
  $month = isset($_GET['month']) ? $_GET['month'] : $defaultMonth;
  /* check that $month is 1 - 12 [or whatever format you're expecting] and if not, set it to $defaultMonth instead, same thing for year */
  $year = isset($_GET['year']) ? $_GET['year'] : $defaultYear;
  /* query your database for events occurring in month $month and year $year */
  /* echo out your calendar HTML with the included events from the requested month/year */
?>

index.php:

<div id='calendar'></div>
<script src='/path/to/jquery.js'></script>
<script>
  var defaultMonth = <?php echo date("n") ?>;
  var defaultYear = <?php echo date("Y") ?>;
  
  var currentMonth = defaultMonth;
  var currentYear = defaultYear;
  
  function UpdateCal() {
    $('#calendar').load('cal.php?month=' + currentMonth + '&year=' + currentYear);
  }
  
  function NextMonth() {
    currentMonth += 1;
    if(currentMonth == 13) {
      currentMonth = 1;
      currentYear += 1;
    }
    UpdateCal();
  }
  
  function PrevMonth() {
    currentMonth -= 1;
    if(currentMonth == 0) {
      currentMonth = 12;
      currentYear -= 1;
    }
    UpdateCal();
  }
  
</script>

【讨论】：