ajax开发 短期班,一个简单的ajax 来mock数据

目录结构：

图片.png

index.html代码：

查询

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

htmls+="

"+arry[i]+"";

}

return htmls;

}

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的文件夹是哪个文件夹

图片.png

把router所在的文件夹设置为静态文件夹：

图片.png

图片.png

ok

图片.png

图片.png