原生ajax-CSDN博客

本文链接：https://blog.csdn.net/zhanghl150426/article/details/83413509

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js-ajax</title>
    </head>
    <body>
        <select name="" id="classMen"></select>
        <select id="userName"></select>
    </body>
    <script>
        var classMen=document.getElementById("classMen");
        var userName=document.getElementById("userName");
        function loadXMLDoc(url){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    //console.log(xmlhttp.response)
                    //console.log(xmlhttp)
                    //console.log(xmlhttp.responseText)
                    var datas=JSON.parse(xmlhttp.response);
                    renderHtml(datas);
                }
            }
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }


        function renderName(data,val){
            var str2=""
                for(var i=0;i<data.length;i++){
                    if(val==data[i].id){
                        str2+="<option>"+data[i].name+"</option>"
                    }
                }
                userName.innerHTML=str2
        }


        function renderHtml(data){
            //渲染班级
            var str1=""
            for(var i=0;i<data.class1.length;i++){
                str1+="<option value='"+data.class1[i].id+"'>"+data.class1[i].a+"</option>"
            }
            classMen.innerHTML=str1
            //渲染班级内的人
            renderName(data.gread,classMen.value)
            //var str2=""
            //for(var i=0;i<data.gread.length;i++){
            //    if(classMen.value==data.gread[i].id){
            //        str2+="<option>"+data.gread[i].name+"</option>"
            //    }

            //}
            //userName.innerHTML=str2

            //改变班级，改变人
            classMen.οnchange=function(){
                renderName(data.gread,this.value)
                //var str2=""
                //for(var i=0;i<data.gread.length;i++){
                //    if(this.value==data.gread[i].id){
                //        str2+="<option>"+data.gread[i].name+"</option>"
                //    }
                //}
                //userName.innerHTML=str2
            }
        }
        loadXMLDoc("data.json")
    </script>
</html>