使用 ajax 更新 DOM 图像数组答案

【问题标题】：Updating DOM images array with ajax使用 ajax 更新 DOM 图像数组
【发布时间】：2016-03-14 01:29:03
【问题描述】：

我的 html 包含不同的图像，没有任何合法性 - 都位于某个表下。例如homepage.htm：

<table id="imagesTable">
    <tr>
        <td>
            <img src="img1.png">
            <div>
                <img src="img2.png">
            </div>
        </td>
        <td>
            <div>
                <div>
                    <img src="img3.png">
                </div>
            </div>
        </td>
    </tr>
</table>

每次我获取该页面时，此页面中的图像源都可能不同（但所有其他元素结构保持不变），我想每 5 秒更新一次页面并更新新图像而不是旧图像（不刷新页面）。我尝试用以下方法实现它（没有成功）：

function updatePage()
{
    $("#imagesTable").load("homepage.htm #imagesTable");
    window.setTimeout("updatePage()",5000);
}
...
<body onload="updatePage();">
....

知道我做错了什么吗？任何其他建议如何解决这个问题？

谢谢

【问题讨论】：

请改用setTimeout(updatePage,5000);。你有什么错误吗？
会不会是浏览器缓存问题？如果您告诉我们问题究竟出在哪里，那会有很大的不同？
目前现有的图片元素确实会改变 - 但新的不会（新图片可以添加到表格中..）
+ 它在 IE7 上不起作用（我使用的是 jQuery 1.8.6）

标签： javascript jquery html ajax web

【解决方案1】：

替换：

$("#imagesTable").load("homepage.htm #imagesTable");
window.setTimeout("updatePage()",5000);

与：

$("#imagesTable").load("homepage.htm #imagesTable *");
window.setTimeout(updatePage,5000);

【讨论】：

没有帮助:(星号代表什么？
@ItayB: * 代表所有类型的孩子。这意味着我们只得到#imagesTable的孩子

【解决方案2】：

我又遇到了我的问题，所以我将添加一个简短的答案 - 我对问题的解决方案：

这些图像的目的是指示一些系统状态；因此，我决定将视图和数据 (MVC) 分开，并添加带有状态状态的 JSON，每 5 秒调用一次（通过 ajax）。现在在客户端中，我使用新图像重新创建了相关的 DOM 部分 - 这些图像适合新的系统状态。

希望这对未来的人有所帮助:-)

干杯！

【讨论】：