为什么无法使用来自Ajax调用的响应来更新html img src

Question

我有一些html，其中包括带有tr行的表 ，每行都有一个包含img元素的td元素。 在页面的其他地方，我有一个ajax方法，该方法将url发送到服务器，然后服务器将其保存在本地并返回该位置。

然后，我尝试使用新的URL更新每个img元素的src属性元素，但没有更新。 我的调试警报呼叫显示找到了图像元素并返回了正确的位置，不知道我在做什么错。

HTML

  <table class="edittable" id="ARTWORK_TABLE">
    <tr>
        <th class="tableheading verysmallinputfield" style="position:relative">
            <label>
                #
            </label>
        </th>
        <th class="tableheading verysmallinputfield" style="position:relative">
            <label>
                Replace
            </label>
        </th>
        <th class="tableheading verylargeinputfield" style="position:relative">
            <label>
                Filename
            </label>
        </th>
        <th class="tableheading mediuminputfield" style="position:relative">
            <label>
                Artwork
            </label>
        </th>
    </tr>
    <tr id="menu_artwork1">
        <td class="tableheading">
            0
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <label>
                E:\Music\Tango in the Night\02 - Seven Wooooooonders.WAV
            </label>
        </td>
        <td>
            <img src="images/51sjc9qpk4oqFYZdroM04w==_thumbnail.jpg" width="32px" height="32px" title="600 x 585">
            <label>
                600 x 585
            </label>
        </td>
    </tr>
    <tr id="menu_artwork2">
        <td class="tableheading">
            1
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <label>
                E:\Music\Tango in the Night\03 - Everywhere.WAV
            </label>
        </td>
        <td>
            <img src="images/51sjc9qpk4oqFYZdroM04w==_thumbnail.jpg" width="32px" height="32px" title="600 x 585">
            <label>
                600 x 585
            </label>
        </td>
    </tr>
.........

Javascript Ajax函数

function sendFormData(urls)
{
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/editsongs.update_artwork', false);
    xhr.setRequestHeader("Content-type", "text/plain");
    xhr.send(urls[0]);
    var images = document.getElementById("ARTWORK_TABLE").getElementsByTagName("img");
    alert("Found img"+images.length);
    for(image in images)
    {
        alert(xhr.responseText);
        image.src = xhr.responseText;
    }
}

Answer 1

尝试改变

image.src = xhr.responseText;

至

images[image].src = xhr.responseText;

有关更多详细信息，请参见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/

Answer 2

尝试console.log images集，然后在for ... in循环中添加每个图片。

您也可以console.log(typeof images)找出它实际上是一个对象，并解释您在for...in循环的每个image中发现的意外值。

既然是这种情况，您可以使用普通的for循环：

for (var i = 0; i < images.length; i++) {
  console.log(images[i]);
}

Answer 3

如果你想保持for ... in语法，你将需要参考属性image （每个img元素）上的你的HTML集合img元素：

for (var image in images) {
    images[image].src = xhr.responseText;
}