部分 PHP 页面未通过 AJAX 调用刷新

Question

我有一个 php 页面，需要使用 AJAX 刷新其中的一部分。

function reloadChart(number) {
    console.log("Reloading chart with number:", number);
    var xmlhttp = new XMLHttpRequest();
    var url = "index.php?r=b3-data/chart_data2&number=" + number;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
........
<div class="chart-container" id="chartContainer">
    <?php include('chart_data2.php');?>
</div>
<div style="text-align: center;">
    <button id="nextButton"><< Next</button>
    <button id="previousButton">Previous >></button>
</div>

chart_data2.php 通过浏览器直接请求可以正常工作。但是使用“上一个”和“下一个”按钮的 AJAX 调用不会刷新主页的图表。

Brower 控制台显示“正在用数字重新加载图表：1”，但 Chart_data2.php 未通过 GET 获取数字

Answer 1

PHP 在您首次加载页面时被解释，因此您不能简单地“重新加载页面的某些部分”。您可以做的是使用 ajax 请求从服务器获取更新的 html，然后用这个新的 HTML 替换您的

chartContainer

的innerHTML。

以下示例使用

fetch

，它是 XmlHttpRequests 的现代实现。我强烈建议使用它，因为它更容易使用并且可以在普通 Javascript 中使用。

async function reloadChart(number) {
    console.log("Reloading chart with number:", number);
    const response = await fetch( "index.php?r=b3-data/chart_data2&number=" + number);
    
    const newChartHtml = response.text();

    document.getElementById('chartContainer').innerHTML = newChartHtml 
}

您还没有发布有关事物后端的任何信息，或者您如何使用路线刷新图表数据，因此我无法推测如何处理事物的后端。但是，此实现假设

index.php?r=b3-data/chart_data2...

将ONLY 返回

chart_data2.php

的 HTML，因为这是我们想要刷新的唯一部分。