省市区三级级联式菜单

最新推荐文章于 2023-06-21 10:01:40 发布

qq_40245293

最新推荐文章于 2023-06-21 10:01:40 发布

阅读量295

点赞数

文章标签： js ajax

本文链接：https://blog.csdn.net/qq_40245293/article/details/109710165

版权

该博客介绍了如何实现省市区三级级联式菜单，利用node.js作为后端与前端通过ajax通信。采用es6面向对象的方式，通过AreaData.js存储数据，ComboBox.js负责创建下拉菜单并处理数据交互，itemServer.js处理服务器端的数据请求和响应。

摘要由CSDN通过智能技术生成

省市区三级级联式菜单

实现效果如下：
在这里插入图片描述

使用node.js作为后端的前后端交互式级联菜单
使用es6面对对象方式

源数据文件AreaData.js部分截图：

在这里插入图片描述

基本思路：

ajax通信传输给node Server后台所选下拉菜单的内容，server处理对应数据后返回给前端进行显示

实现功能：

首先根据需求建立接口文档，对各种需求进行预期处理。
然后创建HTML文档——loadComboBox.html
创建元数据js文件——AreaData.js，存储各省市县的数据
创建一个js文件——ComboBox.js，来创建下拉菜单框，并且负责向server端发送数据以及接受数据，并进行页面显示。
创建server的js文件——itemServer.js，获取源数据，并根据页面需求进行对应的数据处理。

部分代码截图：

loadComboBox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select{
   
            width: 100px;
            height: 25px;
        }
    </style>
</head>
<body>
    <select id="country"></select> -->
    <script type="module">
        import ComboBox from "./js/ComboBox.js";
        var combo = new ComboBox();
        combo.appendTo("body");
    </script>
</body>
</html>

ComboBox.js

import Component from "./Component.js";
import QueryString from "./QueryString.js";
export default class ComboBox extends Component{
   
    dataList;
    provinceName;
    countryName;
    cityName;
    constructor(){
   
        super();
        this.init();
    }
    appendTo(parent){
   
        super.appendTo(parent);
    }
    // TODO init初始化函数
    init(){
   
        this.createArea(document.body);
        this.ajax("province");
    }
    // TODO 创建select标签
    createArea(target){
    
        target.inn