gpt4 book ai didi

Javascript 异步更新内容

转载 作者:行者123 更新时间:2023-11-27 23:46:12 25 4
gpt4 key购买 nike

我想知道如何使用 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>

最佳答案

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

AJAX 是一种允许客户端上的 JavaScript 异步请求的技术。浏览器可以随时发出他们想要的任何请求,就像在本例中一样,但如果没有 AJAX,则无法在网站加载的客户端代码中完成此操作。

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

enter image description here

关于Javascript 异步更新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33157041/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com