jquery利用ajax请求数据渲染二级菜单，【跳槽必备】

以下是使用jQuery和AJAX来渲染二级菜单的示例代码：

HTML部分：

<div id="menu">
  <ul>
    <li><a href="#">一级菜单1</a>
      <ul>
        <li><a href="#">二级菜单1-1</a></li>
        <li><a href="#">二级菜单1-2</a></li>
      </ul>
    </li>
    <!-- 其他一级菜单 -->
  </ul>
</div>

jQuery和AJAX部分：

$(document).ready(function() {
  // 假设有一个getMenuData的API接口返回二级菜单数据
  $.ajax({
    url: 'getMenuData', // 接口URL
    type: 'GET', // 请求方法
    dataType: 'json', // 返回的数据类型
    success: function(data) {
      // 成功获取数据后，遍历数据并渲染菜单
      var menuHTML = '';
      $.each(data, function(index, item) {
        menuHTML += '<li><a href="#">' + item.name + '</a>';
        menuHTML += '<ul>';
        $.each(item.submenu, function(subIndex, subItem) {
          menuHTML += '<li><a href="#">' + subItem.name + '</a></li>';
        });
        menuHTML += '</ul></li>';
      });
      $('#menu ul').append(menuHTML); // 将生成的HTML追加到菜单中
    },
    error: function(error) {
      console.log('Error fetching menu data: ', error);
    }
  });
});

假设getMenuData接口返回的JSON数据格式如下：

[
  {
    "name": "一级菜单1",
    "submenu": [
      { "name": "二级菜单1-1" },
      { "name": "二级菜单1-2" }
    ]
  },
  // 其他一级菜单...
]

这段代码在页面加载完成后，通过AJAX请求获取二级菜单的数据，然后使用jQuery动态地将这些数据渲染到页面上的一级菜单项下。