Question

我想知道如何使用javascript，可以通过在页面加载后更改img元素的src来异步加载图像。我认为AJAX就是这样的（从服务器获取数据而不刷新页面）。请说明为什么这样做。图像在服务器端，所以我认为我应该在结果可见之前刷新页面。

以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<script>
var photos = ["baloon", "game", "cliff"];
function changePhoto() {
    var input=document.getElementById("ph1");
    var iValue=input.value.trim();
    for(var tmp in photos) {
        if(photos[tmp] === iValue){
            var img=document.getElementById("photo");
            img.setAttribute("src", "img/"+iValue+".jpg");
        }
    }
}
</script>
</head>
<body>
  <input class="form-control" id="ph1" type="text" onkeyup="">
  <p>Photo: <span id="txtHint" onclick="changePhoto()"></span></p>
  </div>
  <div class="container" id="photocontainer">
    <img id="photo">
  </div>
</body>
</html>

Answer 1

用户代理只是发送一个GET请求以响应src属性的更改，这与最初加载页面时的操作相同。

AJAX是一种允许客户端上 JavaScript 中的异步请求的技术。浏览器可以随时发出他们想要的任何请求，就像在这种情况下一样，但没有AJAX在网站加载的客户端代码中无法完成。

例如，我刚刚通过Chrome开发者工具更改了网页中元素的src属性，并观看了GET请求的执行情况。

Answer 2

您在代码中所做的不是Ajax。简单的javascript。

要使用Ajax工作，您需要一个实际呈现图像或从现有文件中获取内容的服务器端应用程序，然后在浏览器上显示加载的文件。

寻找jQuery ajax调用。在回复电话时，您可以输入您的代码。像这样：

$.ajax({
    url: "SomeUrl/SomeMethod/"
})
.done(function (response) {
    //Do stuff here with the response to show the image
});

Answer 3

当您更改img元素浏览器的src atrribute时，会自动开始异步下载此图像。

你的代码几乎没问题。您错误地遍历数组。您可以尝试这样做：

var photos = ["baloon", "game", "cliff"];
function changePhoto() {
    var input=document.getElementById("ph1");
    var iValue=input.value.trim();

    if(photos.indexOf(iValue) > -1) {
        var img=document.getElementById("photo");
        img.setAttribute("src", "img/"+iValue+".jpg");
    }
}

迭代数组

您可以像这样迭代数组：

for(var i=0; i<photos.length; i++) {
    var photo = photos[i];
    //...
}

或者像这样：

for(var k in Object.keys(photos)) {
    var photo = photos[k];
    //...
}

Javascript异步更新内容

3 个答案:

迭代数组