jquery利用ajax请求数据渲染二级菜单

jquery利用ajax请求数据渲染二级菜单

思路分析

• 先利用css写出要得到的样式
• 再利用ajax请求一个json数据,这个数据是二维的
• 利用模板字符串对数据进行渲染
• 本文中我们以下图为例

一、先用html、css写出想要的样式

   			<ul>
                <li>
                      <!-- p 是一级菜单 -->
                    <p>一级菜单</p>
                      <!-- ol 是二级菜单 -->
                    <ol>二级菜单</ol>
                    <ol>二级菜单</ol>
                    <ol>二级菜单</ol>
                    <ol>二级菜单</ol>
                </li>
                <li>
                    <p>1</p>
                    <ol>1</ol>
                    <ol>2</ol>
                    <ol>3</ol>
                    <ol>4</ol>
                </li>
                <li>
                    <p>1</p>
                    <ol>1</ol>
                    <ol>2</ol>
                    <ol>3</ol>
                    <ol>4</ol>
                </li>
                <li>
                    <p>1</p>
                    <ol>1</ol>
                    <ol>2</ol>
                    <ol>3</ol>
                    <ol>4</ol>
                </li>
                <li>
                    <p>1</p>
                    <ol>1</ol>
                    <ol>2</ol>
                    <ol>3</ol>
                    <ol>4</ol>
                </li>
                <li>
                    <p>1</p>
                    <ol>1</ol>
                    <ol>2</ol>
                    <ol>3</ol>
                    <ol>4</ol>
                </li>
            </ul>

	*{margin: 0;padding: 0;}
  	ul,li{list-style: none;}
  	ul{width: 970px;height: 112px;margin: 0 auto;}
	ul li{float: left;width: 160px;}
	ul li p{font-size: 14px;margin-bottom: 25px;}
	ul li ol{font-size: 12px;color: #a8a7a7;margin-bottom: 10px;}

二、jquery利用ajax请求数据

• 先准备好一个json数据

[
    {	
    //一级菜单内容
        "id":1,
        "name":"帮助中心",
        //list  二级菜单
        "list":[
            {
                "id":101,
                "list_name":"账户管理"
            },
            {
                "id":102,
                "list_name":"购物指南"
            },
            {
                "id":103,
                "list_name":"订单操作"
            }
        ]
    },
    {
        "id":2,
        "name":"服务支持",
        "list":[
            {
                "id":201,
                "list_name":"售后政策"
            },
            {
                "id":202,
                "list_name":"自助服务"
            },
            {
                "id":203,
                "list_name":"相关操作"
            }
        ]
    },
    {
        "id":3,
        "name":"线下门店",
        "list":[
            {
                "id":301,
                "list_name":"小米之家"
            },
            {
                "id":302,
                "list_name":"服务网点"
            },
            {
                "id":303,
                "list_name":"授权体验店"
            }
        ]
    },
    {
        "id":4,
        "name":"关于小米",
        "list":[
            {
                "id":401,
                "list_name":"了解小米"
            },
            {
                "id":402,
                "list_name":"加入小米"
            },
            {
                "id":403,
                "list_name":"投资者关系"
            },
            {
                "id":403,
                "list_name":"廉洁举报"
            }
        ]
    },
    {
        "id":5,
        "name":"关注我们",
        "list":[
            {
                "id":501,
                "list_name":"新浪微博"
            },
            {
                "id":502,
                "list_name":"官方微信"
            },
            {
                "id":503,
                "list_name":"联系我们"
            }
        ]
    },
    {
        "id":6,
        "name":"特色服务",
        "list":[
            {
                "id":601,
                "list_name":"F 码通道"
            },
            {
                "id":602,
                "list_name":"礼物码"
            },
            {
                "id":603,
                "list_name":"防伪查询"
            }
        ]
    }
]

• jQuery进行ajax请求，并利用模板字符串

    $.ajax({
    //这里是自己模拟的一个json数据  又接口可以直接写接口地址
        url: './list.json',
        dataType: 'json',
        success: function (res) {
            let str = ''
            res.forEach(item => {
                str += `<li>
                <p>${item.name}</p>`

                let list = item.list

                list.forEach(item2 => {
                    str += ` <ol>${item2.list_name}</ol>`
                })

                str += `</li>`
            })
            $('ul').html(str)
        }
    })

• 这时html内容只剩下

	 <ul></ul>

• 实现效果如下
  

在完成二级菜单的渲染之后，也可以尝试给二级菜单添加事件，进行更复杂的用法。