前后端交互

实现前后端交互

从后端获取数据渲染在前端页面
js代码：

function getList() {
    $.ajax({
      url: '../lib/nav_top.json',
      dataType: 'json',
      success: function (res) {
        console.log(res)

        // 4-1. 准备一个空字符串
        let str = ''

        // 4-2. 渲染一级的 li
        res.forEach(item => {
          str += `<li>${item.name}</li>`
        })

        // 4-3. 填充到 nav_top 里面的 ul 里面
        $('.nav_top  ul')
          .html(str)
          .on({
            mouseenter: () => $('.nav_box').stop().slideDown(),
            mouseleave: () => $('.nav_box').stop().slideUp()
          })
          .children('li') // 找到所有的一级菜单下的 li
          .on('mouseover', function () {
            // 5-1. 知道自己移入的时哪一个 li
            const index = $(this).index()
            // 5-2. 找到要渲染的数组
            const list = res[index].list
            // 5-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>
                `
            })

            // 5-5. 填充到页面里面
            $('.nav_box > ul').html(str)
          })

        // 4-4. 给 nav_box 添加一个移入移出事件
        $('.nav_box')
          .on({
            mouseover: function () { $(this).finish().show() },
            mouseout: function () { $(this).finish().slideUp() }
          })
      }
    })
  }

HTML代码：

<div class="nav_top container">
        <div class="top_box">
            <div class="logo">
                <a href="./index.html">
                    <img src="../images/index/logo.jpg" alt="" title="小米官网">
                </a>
            </div>
            <ul>
                <li>小米手机</li>
                <li>Redmi红米</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>家电</li>
                <li>路由器</li>
                <li>智能硬件</li>
            </ul>
            <div class="ipt">
                <input type="text">
                <div><i class="iconfont icon-sousuo"></i></div>
            </div>
        </div>
    </div>

    <div class="nav_box">
        <ul class="container">
        </ul>
    </div>

css渲染代码：

.nav_top {
  height: 100px;

  > .top_box {
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    > .logo {
      margin-top: 15px;
    }

    > ul {
      display: flex;
      align-items: center;
      height: 100%;
      width: 542px;
      margin-left: 190px;
      margin-right: 119px;

      > li {
        padding: 0 12px;
        font-size: 22px;
        cursor: pointer;
        font-size: 16px;
        &:hover {
          color: #ff6700;
        }
      }
    }

    > .ipt {
      display: flex;

      > input {
        height: 50px;
        float: left;
        width: 245px;
      }

      > div {
        width: 52px;
        height: 52px;
        float: left;
        border: 1px solid #ccc;
        border-left: none;
        position: relative;
        &:hover {
          cursor: pointer;
          background-color: #ff6700;

          > i {
            color: #fff;
          }
        }

        > i {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 25px;
          color: #ccc;
        }
      }
    }
  }
}

.nav_box {
  border-top: 1px solid #ccc;
  display: none;
  position: relative;
  background-color: #fff;

  > ul {
    display: flex;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 146px;
    background-color: #fff;

    > li {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      &:hover {
        color: #ff6700;
      }

      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #333;
        margin-bottom: 15px;

        img {
          width: 160px;
          height: 110px;
          display: block;
        }
      }

      > p {
        margin-bottom: 5px;
      }

      &:last-child {
        > div {
          border: none;
        }
      }
    }
  }
}

实现效果如下图：