Question

我有这段代码：

function loadXMLDoc(h)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var getEle = document.getElementsByClassName('cut_oak_tree')[0];
            getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);
        }
      }
    xmlhttp.open("POST","i",true);
    xmlhttp.send();
    }

此功能的作用是，当您按下图像时，图像会消失。我希望它改成另一个图像，我尝试过这样的事情：

getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.src="hello.png");

没有运气。该页面包含几个相同类型的图像。如果您想查看HTML代码，请查看：

<div class="cut_oak_tree">
            <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC -->
            <br>
            <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC -->
            <img src="http://www.pbpixels.com/x/images/oak.png  " onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC -->
        </div>

提前致谢。

Answer 1

替换它：

getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);

用这个：

var imgElems = getEle.getElementsByTagName('img');
for (var i = 0; i < imgElems.length; i++) {
    imgElems[i].src = xmlhttp.responseText;
}

您可能想要定义图片的路径，因此您可以使用imgElems[i].src = imagePath + xmlhttp.responseText;。

更新

因此，将img标记更改为此（loadXMLDoc参数已更改）：

<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction(this)" />

然后，不是我上面给你的4行部分，而是使用这个：

h.src = xmlhttp.responseText; // h now refers to the clicked image

Answer 2

即使路径正确，您的新图像也不会自动加载

您可以通过传递一个额外的变量来强制浏览器重新加载图像：

 d = new Date();
 getEle.src = "xmlhttp.responseText?"+d.getTime();

用Ajax更改一个简单的src

2 个答案: