#### 关于普通的二级渲染：
**1.渲染是我们在写页面时最常见的事，也一个前端开发人员的基本要求。在通过请求后台拿到数据接口后，如何把得到的内容更好的展示到页面上，我在这儿用的事拼接字符串的方式：**
下面假设是我们拿到的返回数据事得到了一个数组形式的数据
```
[
{
title: "特色购物",
id: 1,
list: [
{
name: '苏宁互联',
id: 101,
},
{
name: '苏宁达人',
id: 102
}
]
},
{
title: "主题频道",
id: 2,
list: [
{
name: '电器城',
id: 201
},
{
name: '苏宁超市',
id: 202
}
]
}
]
二级数组渲染
```
首先分析我们要渲染的形式：假设我要渲染的是一个ul列表，那么我们就要在他的li里渲染好每个li数据：
我们在js文件中先准备一个函数，函数里我们先使用Ajax请求去请求数据，可以这么写：
```
getList()
function getList() {
$.ajax({
url: '../lib/nav.json',
dataType: 'json',
success: function (res) {
// console.log(res) res就是我们拿到这个数组
// 1. 准备一个 空字符串
let str = ''
// 2. 进行拼接
// 2-1. 遍历外层数组, 先把一级标题写上
res.forEach(item => {
str += `
<li>
<p>${ item.title }</p>
<ol>
`
// 2-2. 遍历里层数组, 渲染 ol 下面的 li
// 里层数组有多少项, 就渲染几个 二级 li 放在这里
item.list.forEach(item2 => {
str += `<li>${ item2.name }</li>`
})
str += `
</ol>
</li>
`
})
// 3. 渲染到页面上
$('.box > ul').html(str)
}
})
}
```
这样我们就可以直接渲染一个二级数组。
#### 带有事件的二级渲染；
**1.那么如何实现在二级渲染的同时给他添加上各种事件呢，其实懂了上面所说的，这里就可以自己尝试了，因为无外乎都是拼接：**
2.首先。我们肯定要提前想好我们要渲染的结构，最好能够把他先写出来，这里我们依旧去渲染一个数组：
```
<div class="header">
<div class="container">
<ul>
<li>
1
</li>
<span>|</span>
<li>2</li>
<span>|</span>
<li>3</li>
<span>|</span>
<li>4</li>
<span>|</span>
<li>5</li>
<span>|</span>
<li>6</li>
<span>|</span>
<li>7</li>
<span>|</span>
<li>8</li>
<span>|</span>
<li>9</li>
<span>|</span>
<li>10</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>
<div class="nav_top">
<ul>
</ul>
</div>
<div class="nav_box">
<ul class="container">
</ul>
</div>
```
数据大家去准备，像上面那样，自己去写一个数组请求回来就好了：
依旧在js文件中去准备一个函数：
```
getList()
function getList() {
$.ajax({
url: '../lib/nav_top.json',
dataType: 'json',
success: function (res) {
console.log(res)
// 1. 准备一个空字符串
let str = ''
// 2. 渲染一级的 li
res.forEach(item => {
str += `<li>${ item.name }</li>`
})
// 3. 填充到 nav_top 里面的 ul 里面
$('.nav_top > ul')
.html(str) //添加之后，使用委托事件的方式。这里用了jQuery。
.on({
mouseenter: () => $('.nav_box').stop().slideDown(),
mouseleave: () => $('.nav_box').stop().slideUp()
})
.children('li') // 找到所有的一级菜单下的 li
.on('mouseover', function () {
//3-1. 知道自己移入的时哪一个 li
const index = $(this).index()
// 3-2. 找到要渲染的数组
const list = res[index].list
// 3-3. 用我们找到的数组把 nav_box 位置渲染了就可以了
let str = ''
// 5-4. 进行组装
list.forEach(item => {
str += `
<li>
<div>
<img src="${ item.list_url }" alt="">
</div>
<p class="title">${ item.list_name }</p>
<span class="price">${ item.list_price }</span>
</li>
`
})
// 3-5. 填充到页面里面
$('.nav_box > ul').html(str)
})
// 4-4. 给 nav_box 添加一个移入移出事件
$('.nav_box')
.on({
mouseover: function () { $(this).finish().show() },
mouseout: function () { $(this).finish().slideUp() }
})
}
})
}
```
**这样就完成了，如果有更好得想法，或者发现错误的话，欢迎随时联系。**
