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

Question

我有一些html包含表和一些 tr 行，每行都有一个包含 img <的 td 元素/ em>元素。在页面的其他地方，我有一个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/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 2

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

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

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

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

Answer 3

如果您想保留for ... in语法，则需要在image元素的HTML集合中引用属性img（每个img元素）：

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