案例:省市区三级联动(ajax)

  步骤 

  1. 通过接口获取省份信息
  2. 使用JavaScript获取到省市区下拉框元素
  3. 将服务器端返回的省份信息显示在下拉框中
  4. 为下拉框元素添加表单值改变事件（onchange）
  5. 当用户选择省份时，根据省份id获取城市信息
  6. 当用户选择城市时，根据城市id获取县城信息
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>搜索框输入文字自动提示</title>
  6     <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
  7     <style type="text/css">
  8         .container {
  9             padding-top: 150px;
 10         }
 11     </style>
 12 </head>
 13 <body>
 14     <div class="container">
 15         <div class="form-inline">
 16             <div class="form-group">
 17                 <select class="form-control" id="province"></select>
 18             </div>
 19             <div class="form-group">
 20                 <select class="form-control" id="city">
 21                     <option>请选择城市</option>
 22                 </select>
 23             </div>
 24             <div class="form-group">
 25                 <select class="form-control" id="area">
 26                     <option>请选择县城</option>
 27                 </select>
 28             </div>
 29         </div>
 30     </div>
 31     <script src="/js/ajax.js"></script>
 32     <script src="/js/template-web.js"></script>
 33     <!-- 省份模板 -->
 34     <script type="text/html" id="provinceTpl">
 35         <option>请选择省份</option>
 36         {{each province}}
 37             <option value="{{$value.id}}">{{$value.name}}</option>
 38         {{/each}}
 39     </script>
 40     <!-- 城市模板 -->
 41     <script type="text/html" id="cityTpl">
 42         <option>请选择城市</option>
 43         {{each city}}
 44             <option value="{{$value.id}}">{{$value.name}}</option>
 45         {{/each}}
 46     </script>
 47     <!-- 县城模板 -->
 48     <script type="text/html" id="areaTpl">
 49         <option>请选择县城</option>
 50         {{each area}}
 51             <option value="{{$value.id}}">{{$value.name}}</option>
 52         {{/each}}
 53     </script>
 54     <script>
 55         // 获取省市区下拉框元素
 56         var province = document.getElementById('province');
 57         var city = document.getElementById('city');
 58         var area = document.getElementById('area');
 59         // 获取省份信息
 60         ajax({
 61             type: 'get',
 62             url: 'http://localhost:3000/province',
 63             success: function (data) {
 64                 // 将服务器端返回的数据和html进行拼接
 65                 var html = template('provinceTpl', {province: data});
 66                 // 将拼接好的html字符串显示在页面中
 67                 province.innerHTML = html;
 68             }
 69         });
 70 
 71         // 为省份的下拉框添加值改变事件
 72         province.onchange = function () {
 73             // 获取省份id
 74             var pid = this.value;
 75 
 76             // 清空县城下拉框中的数据
 77             var html = template('areaTpl', {area: []});
 78             area.innerHTML = html;
 79 
 80             // 根据省份id获取城市信息
 81             ajax({
 82                 type: 'get',
 83                 url: '/cities',
 84                 data: {
 85                     id: pid
 86                 },
 87                 success: function (data) {
 88                     var html = template('cityTpl', {city: data});
 89                     city.innerHTML = html;
 90                 }
 91             })
 92         };
 93 
 94         // 当用户选择城市的时候
 95         city.onchange = function () {
 96             // 获取城市id
 97             var cid = this.value;
 98             // 根据城市id获取县城信息
 99             ajax({
100                 type: 'get',
101                 url: 'http://localhost:3000/areas',
102                 data: {
103                     id: cid
104                 },
105                 success: function(data) {
106                     var html = template('areaTpl', {area: data});
107                     area.innerHTML = html;
108                 }
109             })
110         }
111     </script>
112 </body>
113 </html>

服务端代码

 

  1 // 获取省份
  2 app.get('/province', (req, res) => {
  3     res.json([{
  4         id: '001',
  5         name: '黑龙江省'
  6     },{
  7         id: '002',
  8         name: '四川省'
  9     },{
 10         id: '003',
 11         name: '河北省'
 12     },{
 13         id: '004',
 14         name: '江苏省'
 15     }]);
 16 });
 17 
 18 // 根据省份id获取城市
 19 app.get('/cities', (req, res) => {
 20     // 获取省份id
 21     const id = req.query.id;
 22     // 城市信息
 23     const cities = {
 24         '001': [{
 25             id: '300',
 26             name: '哈尔滨市'
 27         }, {
 28             id: '301',
 29             name: '齐齐哈尔市'
 30         }, {
 31             id: '302',
 32             name: '牡丹江市'
 33         }, {
 34             id: '303',
 35             name: '佳木斯市'
 36         }],
 37         '002': [{
 38             id: '400',
 39             name: '成都市'
 40         }, {
 41             id: '401',
 42             name: '绵阳市'
 43         }, {
 44             id: '402',
 45             name: '德阳市'
 46         }, {
 47             id: '403',
 48             name: '攀枝花市'
 49         }],
 50         '003': [{
 51             id: '500',
 52             name: '石家庄市'
 53         }, {
 54             id: '501',
 55             name: '唐山市'
 56         }, {
 57             id: '502',
 58             name: '秦皇岛市'
 59         }, {
 60             id: '503',
 61             name: '邯郸市'
 62         }],
 63         '004': [{
 64             id: '600',
 65             name: '常州市'
 66         }, {
 67             id: '601',
 68             name: '徐州市'
 69         }, {
 70             id: '602',
 71             name: '南京市'
 72         }, {
 73             id: '603',
 74             name: '淮安市'
 75         }]
 76     }
 77     // 响应
 78     res.send(cities[id]);
 79 });
 80 
 81 // 根据城市id获取县城
 82 app.get('/areas', (req, res) => {
 83     // 获取城市id
 84     const id = req.query.id;
 85     // 县城信息
 86     const areas = {
 87         '300': [{
 88             id: '20',
 89             name: '道里区',
 90         }, {
 91             id: '21',
 92             name: '南岗区'
 93         }, {
 94             id: '22',
 95             name: '平房区',
 96         }, {
 97             id: '23',
 98             name: '松北区'
 99         }],
100         '301': [{
101             id: '30',
102             name: '龙沙区'
103         }, {
104             id: '31',
105             name: '铁锋区'
106         }, {
107             id: '32',
108             name: '富拉尔基区'
109         }]
110     };
111     // 响应
112     res.send(areas[id] || []);
113 });

 

posted @ 2020-05-22 18:17  不忘初心l  阅读(505)  评论(0)    收藏  举报