一个简单的ajax 来mock数据

目录结构：

图片.png

index.html代码：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div>
                <input id="username" type="text" name="username" />
                <button id="btn">查询</button>
            </div>
            <ul class="list">
                
            </ul>
            <script>
                var Oinput=document.querySelector("#username");
                var Obtn=document.querySelector("#btn");
                var Olist=document.querySelector(".list");
                
                Obtn.addEventListener("click",function(){
                    var xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState===4&&(xhr.status===200||xhr.status===304)){
                            var firends=JSON.parse(xhr.responseText);
                            console.log(firends)
                            var htmls=render(firends);
                            Olist.innerHTML=htmls;
                        }
                    }
                    xhr.open("get","/loadMore?username="+Oinput.value,true)
                    xhr.send()
                    
                })
                function render(arry){
                    var htmls='';
                    for (var i=0;i<arry.length;i++) {
                        htmls+="<li>"+arry[i]+"</li>";
                    }
                    return htmls;
                }
            </script>
        </body>
    </html>

router.js代码：

    app.get("/loadMore",function(req,res){
        var username=req.query.username;
        var firends
        if(username==="yangliu"){
            firends=["小明","小红"]
        }else{
            firends=["nobody"]
        }
        res.send(firends);
    })

注意如果把ajax操作文件和router放到js文件夹下，需要设置public的文件夹是哪个文件夹