ajax三级联动是什么,利用ajax写出三级联动

话不多说，上代码

搜索框输入文字自动提示

.container {

padding-top: 150px;

}

请选择城市

请选择县城

请选择省份

{{each province}}

{{$value.name}}

{{/each}}

请选择城市

{{each city}}

{{$value.name}}

{{/each}}

请选择县城

{{each area}}

{{$value.name}}

{{/each}}

// 获取省市区下拉框元素

var province = document.getElementById('province');

var city = document.getElementById('city');

var area = document.getElementById('area');

// 获取省份信息

ajax({

type: 'get',

url: 'http://localhost:3000/province',

success: function (data) {

// 将服务器端返回的数据和html进行拼接

var html = template('provinceTpl', {province: data});

// 将拼接好的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: '/cities',

data: {

id: pid

},

success: function (data) {

var html = template('cityTpl', {city: data});

city.innerHTML = html;

}

})

};

// 当用户选择城市的时候

city.onchange = function () {

// 获取城市id

var cid = this.value;

// 根据城市id获取县城信息

ajax({

type: 'get',

url: 'http://localhost:3000/areas',

data: {

id: cid

},

success: function(data) {

var html = template('areaTpl', {area: data});

area.innerHTML = html;

}

})

}

node创建服务器，返回数据

// 引入express框架

const express = require('express');

// 路径处理模块

const path = require('path');

// 创建web服务器

const app = express();

// 静态资源访问服务功能

app.use(express.static(path.join(__dirname, 'public')));

// 获取省份

app.get('/province', (req, res) => {

res.json([{

id: '001',

name: '黑龙江省'

}, {

id: '002',

name: '四川省'

}, {

id: '003',

name: '河北省'

}, {

id: '004',

name: '江苏省'

}]);

});

// 根据省份id获取城市

app.get('/cities', (req, res) => {

// 获取省份id

const id = req.query.id;

// 城市信息

const cities = {

'001': [{

id: '300',

name: '哈尔滨市'

}, {

id: '301',

name: '齐齐哈尔市'

}, {

id: '302',

name: '牡丹江市'

}, {

id: '303',

name: '佳木斯市'

}],

'002': [{

id: '400',

name: '成都市'

}, {

id: '401',

name: '绵阳市'

}, {

id: '402',

name: '德阳市'

}, {

id: '403',

name: '攀枝花市'

}],

'003': [{

id: '500',

name: '石家庄市'

}, {

id: '501',

name: '唐山市'

}, {

id: '502',

name: '秦皇岛市'

}, {

id: '503',

name: '邯郸市'

}],

'004': [{

id: '600',

name: '常州市'

}, {

id: '601',

name: '徐州市'

}, {

id: '602',

name: '南京市'

}, {

id: '603',

name: '淮安市'

}]

}

// 响应

res.send(cities[id]);

});

// 根据城市id获取县城

app.get('/areas', (req, res) => {

// 获取城市id

const id = req.query.id;

// 县城信息

const areas = {

'300': [{

id: '20',

name: '道里区',

}, {

id: '21',

name: '南岗区'

}, {

id: '22',

name: '平房区',

}, {

id: '23',

name: '松北区'

}],

'301': [{

id: '30',

name: '龙沙区'

}, {

id: '31',

name: '铁锋区'

}, {

id: '32',

name: '富拉尔基区'

}]

};

// 响应

res.send(areas[id] || []);

});

// 监听端口

app.listen(3000);

// 控制台提示输出

console.log('服务器启动成功');