📌  相关文章
📜  使用 JavaScript 刷新图像后如何获取新的图像 URL?(1)

📅  最后修改于: 2023-12-03 15:36:29.528000             🧑  作者: Mango

使用 JavaScript 刷新图像后如何获取新的图像 URL?

在网页应用程序中,刷新图像是一项常见的任务。下面是几种获取新图像 URL 的方法:

方法1:将新的图像 URL 直接存储在 JavaScript 变量中

这种方法适用于预装了所有可能出现的图像以供使用。当需要显示不同的图像时,只需更新 JavaScript 变量即可。

var imgUrl = 'myImage.jpg';
document.getElementById('myImage').src = imgUrl;
方法2:使用 XMLHttpRequest 从服务器上获取图像 URL

这种方法适用于需要动态获取新图像 URL 的情况。

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            var imgUrl = httpRequest.responseText;
            document.getElementById('myImage').src = imgUrl;
        } else {
            // 处理错误
        }
    }
};
httpRequest.open('GET', 'getNewImage.php');
httpRequest.send();
方法3:使用 Fetch API 从服务器上获取图像 URL

这种方法类似于方法2,但使用了更现代的 Fetch API。

fetch('getNewImage.php')
    .then(function(response) {
        if (response.status === 200) {
            return response.text();
        } else {
            throw new Error('获取图像URL时出错');
        }
    })
    .then(function(imgUrl) {
        document.getElementById('myImage').src = imgUrl;
    })
    .catch(function(error) {
        // 处理错误
    });

以上是几种获取新图像 URL 的方法,根据实际情况选择合适的方法。