如何使用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>

谢谢你的时间 ！希望能找到一个好的解决方案！：D

PS：如果您需要更多信息，请告诉我，我可能会忘记一些事情。

Answer 1

如果您使用Fetchapi 并向 PHP 脚本发送 POST 请求，您可以尝试这样的操作 - 未经测试：<?php&nbsp; &nbsp; # calendar.php ~ obviously there will need to be MORE code than this...&nbsp; &nbsp; if( SERVER['REQUEST_METHOD']=='POST' && isset($_POST['year'],$_POST['month']) ){&nbsp; &nbsp; &nbsp; &nbsp; #ensure no extra data is sent back - flush buffers&nbsp; &nbsp; &nbsp; &nbsp; ob_clean();&nbsp; &nbsp; &nbsp; &nbsp; #send a response&nbsp; &nbsp; &nbsp; &nbsp; exit( createCalendar( $_POST['year'], $_POST['month'] ) );&nbsp; &nbsp; }?>以及使用 Javascript 发送 AJAX 请求Fetchlet next = document.getElementById("buttonNext");let monthNb = String(new Date().getMonth() + 1).padStart(2, '0');let yearNb = new Date().getFullYear();next.addEventListener("click", function(event) {&nbsp; &nbsp; monthNb++;&nbsp; &nbsp; If (monthNb > 12) {&nbsp; &nbsp; &nbsp; &nbsp; yearNb++;&nbsp; &nbsp; }&nbsp; &nbsp; let fd=new FormData();&nbsp; &nbsp; &nbsp; &nbsp; fd.append('year',yearNb);&nbsp; &nbsp; &nbsp; &nbsp; fd.append('month',monthNb);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; fetch( '/path/to/calendar.php', {method:'post',body:fd})&nbsp; &nbsp; &nbsp; &nbsp; .then( res=>res.text() )&nbsp; &nbsp; &nbsp; &nbsp; .then( text=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("calendarContainer").innerHTML=text&nbsp; &nbsp; &nbsp; &nbsp; })});

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) {&nbsp; &nbsp; monthNb++;&nbsp; &nbsp; If (monthNb > 12) {&nbsp; &nbsp; &nbsp; &nbsp; yearNb++;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fetch(`ajax.php?year=${yearNb}&month=${monthNb}`, {&nbsp; &nbsp; &nbsp; method: 'GET',&nbsp;&nbsp; &nbsp; &nbsp; headers:{&nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; })&nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; document.getElementById("calendarContainer").innerText = response;&nbsp; &nbsp; }).catch(error => console.error('Error:', error));});