《前端代码》
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
</head>
<!--引入模板资源文件-->
<script src="template.js"></script>
<body>
<h2>省市区三级联动</h2>
<!--省份-->
<select id="province" οnchange="showcity(this.value)">
<option value="0">请选择省份</option>
</select>
<!--城市-->
<select id="city" οnchange="showarea(this.value)">
<option value="">请选择城市</option>
</select>
<!--区县-->
<select id="area">
<option value="">请选择区县</option>
</select>
<!--编写模板-->
<script id="list" type="text/html">
{{each data as v i}}
<option value="{{v.code}}">{{v.name}}</option>
{{/each}}
</script>
<script type="text/javascript">
// <!--页面加载完成的时候，构造ajax显示省份-->
window.onload = function() {
var ajax = new XMLHttpRequest();
ajax.open('get', '/area.html?code=0');
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
data = JSON.parse(data);
// 渲染模板
var html = template('list', {
"data": data
});
province.innerHTML += html;
}
};
ajax.send();
}
//显示城市
function showcity(code) {
var ajax = new XMLHttpRequest();
ajax.open('get', '/area.html?code=' + code);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
data = JSON.parse(data);
// 渲染模板
var html = ' <option value="">请选择城市</option>';
html += template('list', {
"data": data
});
city.innerHTML = html;
// 在改变第一个输入框的值后，第三个输入框也得联动
area.innerHTML = '<option value="">请选择区县</option>';
}
};
ajax.send();
}
//显示区县
function showarea(code) {
var ajax = new XMLHttpRequest();
ajax.open('get', '/area.html?code=' + code);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
data = JSON.parse(data);
// 渲染模板
var html = ' <option value="">请选择区县</option>';
html += template('list', {
"data": data
});
area.innerHTML = html;
}
};
ajax.send();
}
</script>
</body>
</html>
《后端代码》
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
//连接数据库
mongoose.connect('mongodb://127.0.0.1:27017/ajax', function (err) {
if (err){
throw err;
} else {
console.log('数据库连接成功...');
}
});
//创建骨架
var testSchema = new mongoose.Schema({
name : String,
code : Number,
parentcode:Number
});
//发布模型
var testModel = mongoose.model('area', testSchema, 'area' );
//根据传过来的code 为 查询的条件（parentcode） 去数据路查询数据
router.get('/area.html', function (req, res) {
var code = parseInt( req.query.code) ;
// console.log(typeof code);
testModel.find({"parentcode":code}).exec(function (err, data) {
res.send(data);
});
});
module.exports = router;
《数据库数据》
db.area.insert({name:'四川省',code:1,parentcode:0})
db.area.insert({name:'广东省',code:2,parentcode:0})
db.area.insert({name:'浙江省',code:3,parentcode:0})
db.area.insert({name:'成都市',code:4,parentcode:1})
db.area.insert({name:'内江市',code:5,parentcode:1})
db.area.insert({name:'南充市',code:6,parentcode:1})
db.area.insert({name:'乐山市',code:7,parentcode:1})
db.area.insert({name:'广州市',code:8,parentcode:2})
db.area.insert({name:'深圳市',code:9,parentcode:2})
db.area.insert({name:'中山市',code:10,parentcode:2})
db.area.insert({name:'武候区',code:11,parentcode:4})
db.area.insert({name:'金牛区',code:12,parentcode:4})
db.area.insert({name:'高新区',code:13,parentcode:4})
db.area.insert({name:'宝安区',code:14,parentcode:9})
db.area.insert({name:'福田区',code:15,parentcode:9})
db.area.insert({name:'南山区',code:16,parentcode:9})
7139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
