xhrxhr

最新推荐文章于 2025-08-01 15:01:36 发布

原创最新推荐文章于 2025-08-01 15:01:36 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文详细介绍了使用原生JavaScript实现的Ajax请求，展示了如何从'weather.json'获取实时天气数据，并通过解析JSON将数据动态填充到HTML元素中，包括天气图标、天气状况、温度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 原生ajax方法 (不太想用jQuery)
function getweather() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET','./js/weather.json');
    xhr.send();

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status <300){
                console.log(xhr.response)
              
                console.log( JSON.parse(xhr.response))
                console.log(JSON.parse(xhr.response).result)
                const data = JSON.parse(xhr.response).result;   //这一步的转换特别重要哦JSON.parse(xhr.response)
                const divs = document.getElementsByClassName('item'); 
                for(let i=0; i<7; i++){
                    divs[i].children[0].src = data[i].weather_icon;
                    divs[i].children[1].children[0].innerHTML = data[i].weather;
                    divs[i].children[1].children[1].innerHTML = data[i].temperature;
                    divs[i].children[1].children[2].innerHTML = data[i].winp;
                    divs[i].children[1].children[3].children[0].innerHTML = data[i].days;
                    divs[i].children[1].children[3].children[1].innerHTML = data[i].week;

                }
                // console.log(data);
            }
        }
    }
}

getweather();