Javascript 加载页面上带有画布的XMLHttpRequest

我试图通过XHR加载一个带有画布的页面，但画布没有显示。我相信这个问题是因为我没有将它附加到XHR响应中

主页

<script type="text/javascript">

function LoadContent1()
{
var LoadContent1;

if (window.XMLHttpRequest)
{
    LoadContent1 = new XMLHttpRequest();
}

LoadContent1.onreadystatechange = function()
{
    if (LoadContent1.readyState == 4 && LoadContent1.status == 200)
    {           
        document.getElementById("loadContent1").innerHTML = LoadContent1.responseText;
        document.getElementById("loadingImageContent1").src = "1-pixel.gif";
        $("#loadContent1Parent").hide();
        $("#loadContent1Child").hide();
    }
}

LoadContent1.open("GET", "page.php", true);
LoadContent1.send();
}

</script>

函数LoadContent1（）
{
var-LoadContent1；
if（window.XMLHttpRequest）
{
LoadContent1=新的XMLHttpRequest（）；
}
LoadContent1.onreadystatechange=函数（）
{
if（LoadContent1.readyState==4&&LoadContent1.status==200）
{           
document.getElementById（“loadContent1”）.innerHTML=loadContent1.responseText；
document.getElementById（“loadingImageContent1”）.src=“1-pixel.gif”；
$（“#loadContent1Parent”）.hide（）；
$（“#loadContent1Child”）.hide（）；
}
}
LoadContent1.open（“GET”，“page.php”，true）；
LoadContent1.send（）；
}

通过XHR（Page.php）加载的页面

var myPie=新图表（document.getElementById（“mycanvas_pie”）.getContext（“2d”））.pie（pieData1，opts）；
var myPie2=新图表（document.getElementById（“mycanvas_pie2”）.getContext（“2d”））.Pie（pieData3，opts）；

首先，您需要确保AJAX调用正在运行，并返回正确的HTML代码。 您可以在任何现代浏览器中通过使用断点（例如）或使用console.log（）方法轻松找到这一点

您还需要确保您试图用响应填充的元素已经存在于DOM中。在您的例子中，它的ID是“loadContent1”

其他建议：

• 我不建议在变量/函数/对象名和DOM元素中使用（几乎）相同的名称。尽量使用描述性名称，因为您的代码很容易混淆，即使是在这个小片段中
• 如果不是必须的，出于安全原因，请尽量避免在接收和显示HTML代码时自动运行javascript代码。例如，您可以将javascript代码放入回调函数中，如果您将这些行组织到单独的对象中，效果会更好

---

是的，它返回正确的HTML代码，它只显示画布以外的所有内容。你有没有想过为什么会这样？谢谢你的建议，我会考虑的。你是说画布元素被正确插入DOM，但是图表没有显示在DOM上？在这种情况下，我假设图表库没有很好地启动/配置。我会尝试自己在画布上画一些东西，以确保元素真的准备好了。如果没有问题，那么问题肯定在图表或其配置中。您还应该检查画布元素是否未被CSS规则隐藏。

<canvas id="mycanvas_pie" height="290" width="290"></canvas>
<canvas id="mycanvas_pie2" height="290" width="290"></canvas>

<script>
    var myPie = new Chart(document.getElementById("mycanvas_pie").getContext("2d")).Pie(pieData1,opts);
    var myPie2 = new Chart(document.getElementById("mycanvas_pie2").getContext("2d")).Pie(pieData3,opts);
</script>