node服务
var http=require("http");
var querystring=require("querystring");
var datas={
"省1":{
"市1":["县1","县2"],
"市2":["县3","县4"]
}
"省2":{
"市3":["县5","县6"],
"市4":["县7","县8"]
}
//实际数据过多,用假数据代替
};
var server=http.createServer(function(req,res){
var data="";
res.writeHead(200,{
"content-type":"text/html;charset=utf-8",
"Access-Control-Allow-Origin":"*"
});
req.on("data",function(_data){
data+=_data;
});
req.on("end",function(){
var type=req.url.trim().split("?")[0].replace(/\//,"");
if(req.method.toLowerCase()==="get"){
if(req.url.includes("favicon.ico")) return res.end();
data=req.url.includes("?")?req.url.split("?")[1]:"";
}
try{
data=JSON.parse(data);
}catch(e){
data=data?querystring.parse(data):{};
}
//把数据返回给客户端
res.write(JSON.stringify(datas));
res.end();
})
})
server.listen(4005,"10.9.72.239",function(){
console.log("服务已开启");
})
html和js(包含ajax部分)
<select name="province" id="province"></select>
<label for="province">省</label>
<select name="city" id="city"></select>
<label for="province">市</label>
<select name="county" id="county"></select>
<label for="province">县/区</label>
<script>
//获取select DOM元素
var select1=document.querySelector("#province");
var select2=document.querySelector("#city");
var select3=document.querySelector("#county");
var data;
init();
function init(){
//给select添加事件
select1.addEventListener("change",changeHandler);
select2.addEventListener("change",changeHandler);
select3.addEventListener("change",changeHandler);
ajax("project");
}
//ajax请求数据
function ajax(type){
var xhr=new XMLHttpRequest();
xhr.open("GET","http://10.9.72.239:4005/"+type);
xhr.send();
xhr.addEventListener("load",loadHandler);
}
function loadHandler(e){
//把请求的数据,变成全局的data变量
data=JSON.parse(e.currentTarget.response);
creatProvinceList();
}
function changeHandler(e){
//根据改变的select是那个类型,决定生成新的列表(城市的,或者县区的)
switch(e.target.id){
case "province":
creatCityList(e.target.value);
break;
case "city":
creatCountyList(select1.value,e.target.value);
break;
}
}
function creatProvinceList(){//创建省份列表的函数
var province=Object.keys(data);
var d=document.createDocumentFragment();
for(var i=0;i<province.length;i++){
var p=document.createElement("option");
p.textContent=province[i]
d.appendChild(p);
}
select1.appendChild(d);
//第一个省份预先被选中,根据省份,预先生成它的城市列表
creatCityList(province[0]);
}
function creatCityList(p){//创建城市列表的函数
var city=Object.keys(data[p]);
var d=document.createDocumentFragment();
for(var i=0;i<city.length;i++){
var c=document.createElement("option");
c.textContent=city[i];
d.appendChild(c);
}
select2.innerHTML="";//加载新的城市列表,记得清空之前的
select2.appendChild(d);
//第一个城市预先被选中,根据省份,预先生成它的区县列表
creatCountyList(select1.value,city[0]);
}
function creatCountyList(p,c){//创建区县列表的函数
var county=data[p][c];
var d=document.createDocumentFragment();
for(var i=0;i<county.length;i++){
var c=document.createElement("option");
c.textContent=county[i]
d.appendChild(c);
}
select3.innerHTML="";//记得清空之前的
select3.appendChild(d);
}
</script>