如何使用javascript将innerText更改为php函数

Question

我必须编写一个包含事件日历的网站，可以循环几个月，这个日历是由 php 函数生成的，我试图向 div 添加一个事件监听器，这样当我单击它时，它会循环浏览月，每次生成一个新的日历。经过一番研究后，我发现我需要使用 AJAX，但我真的不知道如何使用它。这是我的代码：let next = document.getElementById("buttonNext");let monthNb = String(new Date().getMonth() + 1).padStart(2, '0');let yearNb = new Date().getFullYear();next.addEventListener("click", function(event) {    monthNb++;    If (monthNb > 12) {        yearNb++;    }                           // I know I am trying to send js var as php but idk ;-;         v      v     document.getElementById("calendarContainer").innerText = '<?php echo createCalendar(yearNb, monthNb); ?>';});HTML/PHP：<div class="button_leftRight"><img src="icons/left" id="buttonBack"></div><div class="button_leftRight"><img src="icons/right" id="buttonNext"></div><div id="calendarContainer">    <?php    echo createCalendar($year, $month);    ?></div>谢谢你的时间 ！希望能找到一个好的解决方案！：DPS：如果您需要更多信息，请告诉我，我可能会忘记一些事情。

Answer 1

如果您使用Fetchapi 并向 PHP 脚本发送 POST 请求，您可以尝试这样的操作 - 未经测试：

<?php

    # calendar.php ~ obviously there will need to be MORE code than this...

    if( SERVER['REQUEST_METHOD']=='POST' && isset($_POST['year'],$_POST['month']) ){

        #ensure no extra data is sent back - flush buffers

        ob_clean();

        #send a response

        exit( createCalendar( $_POST['year'], $_POST['month'] ) );

    }

?>

以及使用 Javascript 发送 AJAX 请求Fetch

let next = document.getElementById("buttonNext");

let monthNb = String(new Date().getMonth() + 1).padStart(2, '0');

let yearNb = new Date().getFullYear();

next.addEventListener("click", function(event) {

    monthNb++;

    If (monthNb > 12) {

        yearNb++;

    }

    let fd=new FormData();

        fd.append('year',yearNb);

        fd.append('month',monthNb);

        

    fetch( '/path/to/calendar.php', {method:'post',body:fd})

        .then( res=>res.text() )

        .then( text=>{

            document.getElementById("calendarContainer").innerHTML=text

        })

});

Answer 2

有很多方法可以执行 ajax 并进行许多优化，但我为您提供了如何执行此操作的简单指南。最简单的方法是在 Web 服务器中创建一个 php 文件，将其命名为 ajax.php，其内容为

<?php echo createCalendar($_GET['year'], $_GET['month']); ?>

然后，在您的 js 代码中对该 ajax.php 文件进行 ajax 调用，例如：

let next = document.getElementById("buttonNext");

let monthNb = String(new Date().getMonth() + 1).padStart(2, '0');

let yearNb = new Date().getFullYear();

next.addEventListener("click", function(event) {

    monthNb++;

    If (monthNb > 12) {

        yearNb++;

    }

      

   fetch(`ajax.php?year=${yearNb}&month=${monthNb}`, {

      method: 'GET', 

      headers:{

        'Content-Type': 'application/json'

      },

    })

    .then(response => {

      document.getElementById("calendarContainer").innerText = response;

    }).catch(error => console.error('Error:', error));

});