收货地址之三级联动式菜单(省、市、区)，利用AJAX通信，面向对象编程，并且将菜单放入指定容器中

最新推荐文章于 2024-07-12 16:27:40 发布

鲸落南北_

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量402

点赞数

分类专栏：自研案例面向对象文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/ldh1101/article/details/109693798

版权

效果图实现功能：各级菜单之间实现联动效果。请求方式：我是利用的AJAX请求数据，GET方式发送，利用了一个组件，将省份名和城市名存为对象直接发送给了服务端。后面我也会将组件的源码开源出来，以便你们理解。// HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

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

效果图
在这里插入图片描述
实现功能：各级菜单之间实现联动效果。

请求方式：我是利用的AJAX请求数据，GET方式发送，利用了一个组件，将省份名和城市名存为对象直接发送给了服务端。后面我也会将组件的代码开源出来，以便你们理解。

// 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>
        *{
    
            margin: 0;
            padding: 0;
        }
        #box{
    
            margin: 50px 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="module">
        import Menu from "./js/Menu.js"
        let div=document.querySelector("#box");
        let menu=new Menu();
        menu.appendTo(div);
    </script>
</body>
</html>

// JS代码

import QueryString from "./QueryString.js"
export default class Menu {
   
    elem;
    constructor(){
   
        this.elem=this.createMenu(); // 创建DOM元素
        this.ajax("province"); // 初次打开页面，设置菜单默认选项
    }
    createMenu(){
   
        if(this.elem) return this.elem;
        let div=document.createElement("div");// 创建最外层容器，用于存放所有的菜单容器
        this.render(div);// 创建菜单并渲染
        return div;
    }
    appendTo(parent){
    // 将该对象插入到指定容器中
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
    ajax(type,data){
    // 创建发送AJAX请求的方法，传入的参数为接口和请求数据
        if(data===undefined) data="";
        data=QueryString.stringify(data);
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",e=>this.loadHanlder(e));
        xhr.open("GET","http://10.9.72.222:4008/"+type+"/?"+data);
        xhr.send();
    }
    render(parent){
   
        for(let i=0;i<3;i++){
    
            let div=document.createElement("div");// 菜单容器
            let div1=document.createElement("div");// 文本容器 
            let span1=document.createElement("span");// 存放选项的文本内容
            let span2=document.createElement("span");// 设置下拉箭头
            let ul=document.createElement("ul"); // 下拉菜单
            Object.assign(div.style,{
   
                marginLeft:"40px",
                cursor:'pointer',
                display:"inline-block",
                position:"relative",
                backgroundColor:'#fff',
                borderRadius: '4px',

最低0.47元/天解锁文章

鲸落南北_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
收货地址之三级联动式菜单(省、市、区)，利用AJAX通信，面向对象编程，并且将菜单放入指定容器中

效果图实现功能：各级菜单之间实现联动效果。请求方式：我是利用的AJAX请求数据，GET方式发送，利用了一个组件，将省份名和城市名存为对象直接发送给了服务端。后面我也会将组件的源码开源出来，以便你们理解。// HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫