ajax 数据访问

╰半夏微凉° 2022-05-10 04:28 100阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
    
            .box{
                list-style: none;
            }
    
            .box li{
                border-bottom: 1px solid #ddd;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
    <select name="" id="type">
        <option value="">--请选择--</option>
        <option value="top">头条</option>
        <option value="guonei">国内</option>
        <option value="junshi">军事</option>
    </select>
    <ul class="box"></ul>
    
    <script>
        var o_select = document.getElementById("type");
        o_select.onchange = function() {
            var v = this.value;
            if(v !== ""){
                showInfo(v);
            }
    
        };
    
        function showInfo (type) {
         var box=document.getElementsByClassName('box')[0];
            box.innerHTML = "";//调取下一个时候把上一个清空
            var xhr=new XMLHttpRequest();//创建对象
            //发送请求
            var url="http://localhost:8088?myUrl=http://v.juhe.cn/toutiao/index?type="+type+"&key=803c0269fc5497a04e8d57496b3916a2";
            xhr.open('get',url,true);
            //监听状态改变事件
            xhr.onreadystatechange=function () {
                if(xhr.readyState===4&&xhr.status===200){
                    //获取服务气端的响应
                    var data=JSON.parse(xhr.responseText).result.data;
                    console.log(data);
                    for(var i=0;i<data.length;i++){
                        var o_li=document.createElement('li');//创建li
                        var o_img=document.createElement('img')//创建img
    
                        var o_h3=document.createElement('h3');
                        o_li.appendChild(o_img)
                        o_img.src=data[i].thumbnail_pic_s;
                        o_h3.innerHTML=data[i].title
                        o_li.appendChild(o_h3);
                        box.appendChild(o_li)
                    }
                }
            }
            xhr.send();
        }
    
    </script>
    </body>
    </htm