<span> 的 Ajax 更新不起作用，如何调试

Question

我想用 php 创建一个可以在服务器端滚动的日历。昨天我收到了一个关于如何用 Ajax 实现它的好建议（我的尝试失败了）。虽然答案看起来很有希望和正确，但我没有让它发挥作用。可能它就像一条错误的路径一样简单，但我对路径的尝试没有成功。不幸的是，我不知道如何调试它。

问题是，单击按钮更新数据（滚动日历）不会提供任何反应。但是，会呈现初始日历视图。

文件结构：

index.php
booking1.php
presentation (folder)
   booking2.php
   cal.php
   home.php

Safari 中显示的客户端代码（在上半部分的末尾，您将找到日历滚动按钮和相应脚本的按钮）

 <span id="calendar">
            <section class="container">
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card_body">
                                <div class="calendar_month">
                                    <span class="calendar_month_title">
                                        <button onclick="prevMonth()">&lt Sep</button>
                                        Oct
                                    </span>
                                    
// ....


    </section>

    <script scr="assets/js/bootstrap.bundle.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script>
    var defaultMonth = 10;
    var defaultYear = 2021;

    var currentMonth = defaultMonth;
    var currentYear = defaultYear;

    function updateCal() {
        $('#calendar').load('presentation/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>

</body>

这是presentation/cal.php 文件

<?php 
$defaultMonth = date("m");
$defaultYear = date("Y");
$month = isset($_GET['month']) ? $_GET['month'] : $defaultMonth;
if (strlen($month) === 1 ) {
    $month = '$month' . strval($month);
}

$year = isset($_GET['year']) ? $_GET['year'] : $defaultYear;
$requestedDate = new DateTime(strval($year) . '-' . strval($month) . '-01');


echo '<section class="container">';
  echo '<div class="row">';
    echo '<div class = "col">';
      echo '<div class = "card"><div class="card_body">';
      getCalendar($requestedDate, true, true, false);
    echo '</div></div>';
  echo '</div>';
echo '</section>';

主目录中的booking1.php（calendar.php 承载getCalendar() 函数）

<?php 

define('HOME_DIR',__DIR__);
require_once __DIR__.'/calendar/calendar.php';
include __DIR__.'/presentation/header.php';
include __DIR__.'/presentation/booking.php';

还有presentation/booking2.php

<section class="container" id="tbd">

<?php
echo '<span id="calendar">';
include __DIR__.'/cal.php';
echo '</span>';

?>
</section>

<script scr="assets/js/bootstrap.bundle.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.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('presentation/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>

</body>

任何想法，为什么按钮点击没有反应？我将如何调试这个？这实际上只是一个小型的私人项目，我还没有设法让 Eclipse 与 MySQL 一起使用，以便我可以使用 Eclipse 进行调试。这就是为什么我出于调试原因打印变量等。但是，如果页面已成功呈现并且仅更新部分失败，则此方法不再有效（在我的（非）专业水平上）

Answer 1

您应该使用浏览器进行调试。在 Chrome/Firefox（未使用过 Safari）中，右键单击并检查。然后Console 选项卡将显示任何 javascript 错误，您也可以从代码中执行console.log() 来调试任何变量，Network 选项卡将显示请求，因此您可以查看 ajax 请求是否正在执行，如果它抛出错误，或者发送的数据和接收的数据是什么。

如果可能，我还建议从头开始重写代码并改进架构。

还有：

• 来自presentation/booking2.php，您正在执行.load('presentation/cal.php')，但不确定是否需要将目录放在这里，因为您已经在其中，因为它可能会尝试转到presentation/presentation/cal.php，但同样，这是您将在控制台和网络中使用浏览器开发人员工具查看
• 不要使用span，而是div，对于容器，最好使用html标签
• 确保您只从一个地方生成日历，这样您就不会重复代码并最终产生奇怪的事情，我的意思是，如果您有一个可以返回您的日历代码的函数，那么您应该同时使用该函数第一次渲染 html 时，也是在 ajax 调用中，或者更好的是，总是通过 ajax 加载日历
• 我建议从头开始编写一个行为如您所愿的简单页面，您可以在其中正确实现从 ajax 加载块并使用按钮“导航”它的效果，然后当它工作时，您可以迁移其余部分将代码写入其中并逐步对其进行测试，以防出现问题，以便您知道何时/是什么原因导致它并能够返回并纠正

ajax初始加载日历示例

查看https://learn.jquery.com/using-jquery-core/document-ready/

注意：您使用的是相当旧的 jQuery 版本，但无论如何该示例应该可以工作。

在<script> 标签的末尾添加：

<script>
//...
$( document ).ready(function() {
    console.log( "loading initial calendar" );
    updateCal();
});
//...
</script>