Question

我试图通过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>

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

<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>

Answer 1

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

您还需要确保您尝试填充响应的元素已存在于DOM中。在您的情况下，它的ID是＆＃34; loadContent1＆＃34;。

其他建议：

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

在加载页面上使用Canvas的XMLHttpRequest

1 个答案: