為什么無法使用來自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;
}