Question

我正在学习AJAX。我正在学习教程。如果单击按钮，则应根据服务器请求的URL更改图像。我发出了警报，它起作用了。我的代码没有问题，它没有起作用。还有另一种方法吗？

<html>
<div id="container">
  <h2> some heading</h2>
  <img id="photo" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"/>
  <br/>
  <button id="btn"> click me</button>
  </div>
</html>
<style>
#container{
  display:flex;
  hright:200px;
  width:300px;
  
  flex-direction:column;
  align-items:center;
}
</style>
<script>
var btn = document.getElementById("#btn");
var img  = document.getElementById("#photo");
 btn.addEventListener("click", function(){
  alert("i am working");

var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function() {
  
  if(XHR.readyState == 4 && XHR.status == 200){
    console.log("it is working");
    var url = JSON.parse(XHR.response.Text).message;
   // console.log(data.message);
    img.src = url;
  }
}
XHR.open("GET", "https://images.dog.ceo/breeds/basenji/n02110806_2006.jpg");
XHR.send();
});
</script>

发送请求到XML服务器不起作用

0 个答案: