本地数据加载 Ajax

最新推荐文章于 2023-03-31 16:22:02 发布

qq_22317389

最新推荐文章于 2023-03-31 16:22:02 发布

阅读量302

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_22317389/article/details/80328075

版权

HTML5 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        *{
            padding: 0%;
            margin: 0%;
        }

        body{
            background: url(bg.png);
            background-size: cover;
        }

        #result{
            text-align: center;
            margin:200px auto;
            width:500px;
	        height:350px;
            background: rgba(0,0,0,.5);
            padding: 10px 30px;
            font-family: 'Times New Roman', Times, serif;
            color: white;
            position: relative;
            box-shadow:0px 20px 35px rgba(0,0,0,.75);
            border:1px solid rgba(255,255,255,.3);
            border-radius: 12px;
        }

        #result img{
            width: 150px;
            position: absolute;
            left: 35%;
            top: 12%;

            
        }

        #result #city{
            font-size: 30px;
            padding-top: 210px;
           
        }

        #result #temp{
            font-size: 30px;
            padding-top:10px;
        }
        
        

         
        #loading{
            font-size: 32px;
            text-align: center;
            /*设置成相对定位就不会占用图片和文字部分了，可以重叠*/
            position: absolute;
            left: 40%;
            top: 45%; 
            transition:opacity 1s;
        }

        #loading.hide{
            opacity: 0;
        }

        #icon,#city,#temp{
            opacity: 0;
            transition: all 1s;
        }

        #icon.show, #city.show, #temp.show{
            opacity: 1;
        }
        
    </style>
</head>
<body>
    <div id="result">
        <p id="loading">Loading...</p>
      <img src="sunny.png" id="icon">
      <p id="city">Shanghai</p>
      <p id="temp">27 C</p>
    </div>

    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlHttp;
            /*浏览器兼容*/
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest(); 
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            

            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4){//表示请求已经完毕，并且响应已经就绪
                //将字符串数据转化为json对象，注意其特定写法
                var jsonObject = eval("(" + xmlhttp.responseText + ")");
                    //文字显示
                    document.getElementById("icon").src = jsonObject.weather+".png";
                    document.getElementById("city").innerHTML = jsonObject.city;
                    document.getElementById("temp").innerHTML = jsonObject.temp + "℃";

                    //loading的隐藏和文字图片的显示
                    document.getElementById("icon").className = "show";
                    document.getElementById("city").className = "show";
                    document.getElementById("temp").className = "show";
                    document.getElementById("loading").className = "hide";
                }
            }

            xmlHttp.open("GET", "json.php",true);
            xmlHttp.send(null);
        }
        loadXMLDoc();
    </script>
</body>
</html>

json.php

{
    "weather": "sunny",
    "temp": "27",
    "city": "Beijing",
}

更改json中的数据，图片文字也会随之改变

qq_22317389

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地数据加载 Ajax

html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫