html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
<style type='text/css'>
.container{
padding-top: 150px;
}
</style>
</head>
<body>
<div class='container'>
<div class="form-inline">
<div class="form-group">
<select type="text" class="form-control" id="province">
<!-- <option>请选择省份</option> -->
</select>
</div>
<div class="form-group">
<select type="text" class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select type="text" class="form-control" id="area">
<option>请选择县区</option>
</select>
</div>
</div>
</div>
<script src="./js/ajax.js"> </script>
<script src="./js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
{{each province}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
{{each city}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县区模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县区</option>
{{each area}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<script>
//获取省市区下拉元素
var province=document.getElementById('province');
var city=document.getElementById('city');
var area=document.getElementById('area');
//1.获取省份信息
ajax({
type:'get',
url:'http://localhost:3000/province',
success:function(data){
// console.log(data);
//将服务器端返回的数据和html进行拼接
// 第一个参数为模板id,第二个参数为服务器返回的数据
var html = template('provinceTpl',{province:data});//province为上面的each对象，必须一致
// console.log(html);
//将拼接好的字符串html显示到页面中
province.innerHTML=html;
}
});
//为省份的下拉框添加值改变事件
province.onchange=function(){
//获取省份的id
var pid=this.value;
//清空县区下拉框中的数据
var html=template('areaTpl',{area:[]});
area.innerHTML=html;
//根据省份id获取城市信息
ajax({
type:'get',
url:'http://localhost:3000/cities',
data:{
id:pid
},
success:function(data){
// console.log(data);
var html = template('cityTpl',{city:data});
city.innerHTML=html;
}
}
);
}
//为市的下拉框添加值改变时事件
city.onchange=function(){
//获取城市id
var cid=this.value;
//根据城市id获取县区id
ajax({
type:'get',
url:'http://localhost:3000/areas',
data:{
id:cid
},
success:function(data){
var html=template('areaTpl',{area:data});
area.innerHTML=html;
}
});
}
</script>
</body>
</html>
Ajax封装方法：
function ajax(options){
//定义默认
var defaults ={
type:'get',
url:'',
data:{},
Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
success:function(){},
error:function(){}
};
//用options中的对象覆盖defaults中对象
Object.assign(defaults,options);
//创建
var xhr= new XMLHttpRequest();
//拼接请求参数变量
var params='';
//循环用户传递进来的对象格式参数
for(var attr in defaults.data){
//将参数转换成字符串格式
params+= attr +'='+ defaults.data[attr] +'&';
}
//字符串截取，将最后的&截取掉
params= params.substr(0,params.length -1);
//判断请求方式
if(defaults.type=='get'){
defaults.url=defaults.url +'?'+ params;
}
//配置
xhr.open(defaults.type,defaults.url);
//发送请求
if(defaults.type=='post'){
//用户期望的向服务端传递的请求参数类型
var contentType=defaults.Headers['Content-Type'];
//post请求时必须设置的
xhr.setRequestHeader('Content-Type',contentType);
//判断请求参数类型
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//监听onload事件,当接收完响应数据后触发
xhr.onload=function(){
//xhr.getResponseHeader()
//获取响应头部数据
var contentType=xhr.getResponseHeader('Content-Type');
//服务端返回的数据
var responseText=xhr.responseText;
if(contentType.includes('application/json')){
//把JSON字符串转换为JSON 对象
responseText = JSON.parse(responseText);
}
//对http状态码判断，判断是否等于200
if(xhr.status==200){
//调用处理成功情况的函数
defaults.success(responseText,xhr);
}else{
//调用处理失败的情况函数
defaults.error(responseText,xhr);
}
}
}
服务器端测试代码：
/**** server.js ****/
// 一个简单的后端路由
//1.引入express框架
const express=require('express');
const fs=require('fs');
//2.引入路径处理模块
const path=require('path');
const bodyParser=require('body-parser');//post
//3.创建web服务器
const app=express();
//post
//extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());
//4.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')));
//5.配置路由 request 请求 response 响应,回应
//get路由 ，对应 province
app.get('/province',(request,response)=>{
//响应
var data= new Array({id:1,name:"黑龙江省"},{id:2,name:"四川省"},{id:3,name:"河北省"},{id:4,name:"安徽省"});
response.send(data)
});
//get路由 ，对应 cities
app.get('/cities',(request,response)=>{
//响应
const id = request.query.id;
var data= new Array();
if (id == 1) {
data =new Array({id:101,name:"哈尔滨市"},{id:102,name:"齐齐哈尔市"},{id:103,name:"牡丹江市"},{id:104,name:"佳木斯市"},{id:105,name:"其他市"});
response.send(data)
} else if(id == 2) {
data =new Array({id:201,name:"成都市"},{id:202,name:"绵阳市"},{id:203,name:"德阳市"},{id:204,name:"攀枝花市"},{id:205,name:"其他市"});
response.send(data)
}
else if(id == 3) {
data =new Array({id:301,name:"河北市"},{id:302,name:"石家庄市"},{id:303,name:"唐山市"},{id:304,name:"保定市"},{id:305,name:"其他市"});
response.send(data)
}
else if(id == 4) {
data =new Array({id:401,name:"合肥市"},{id:402,name:"滁州市"},{id:403,name:"宿州市"},{id:404,name:"阜阳市"},{id:405,name:"其他市"});
response.send(data)
}
});
//get路由 ，对应 areas
app.get('/areas',(request,response)=>{
//响应
const id = request.query.id;
var data= new Array();
if (id == 101) {
data =new Array({id:1011,name:"依兰县"},{id:1012,name:"方正县"},{id:1013,name:"宾县"},{id:1014,name:"木兰县"},{id:1015,name:"其他县"});
response.send(data)
} else if(id == 102) {
data =new Array({id:1021,name:"龙江县"},{id:1022,name:"依安县"},{id:1023,name:"泰来县"},{id:1024,name:"拜泉县"},{id:1025,name:"其他县"});
response.send(data)
}
else if(id == 103) {
data =new Array({id:1031,name:"林口县"},{id:1032,name:"其他县"});
response.send(data)
}
else if(id == 104) {
data =new Array({id:1041,name:"桦南县"},{id:1042,name:"桦川县"},{id:1043,name:"其他县"});
response.send(data)
} else if(id == 105) {
data =new Array({id:1051,name:"其他县"});
response.send(data)
}
// 其他城市的就不写进行测试了，实际项目中还维护到数据库中，然后从数据库查询带出
});
//6.监听端口,进行回调
app.listen(3000,(err)=>{
// 函数体
if(!err) {
console.log('测试ajax请求的服务器开启成功了!');
console.log('正在监听3000端口...........');
}
});
到此这篇关于Ajax实现省市区三级联动的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持易知道(ezd.cc)。
