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.listlist.forEach(item2 => {str += ` <ol>${item2.list_name}</ol>`})str += `</li>`})$('ul').html(str)}})

这时html内容只剩下

  <ul></ul>

实现效果如下

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

jquery利用ajax请求数据渲染二级菜单相关推荐

ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
jQuery的ajax获取数据渲染页面
一.ajax的请求方式 post $.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务 ...
ajax请求数据渲染个人中心页面
1. 根据用户请求返回个人中心空模板文件数据 # 获取个人中心数据 @route("/center.html") def center():# 响应状态status = " ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
ajax浏览器操作发生异常,解决IE浏览器缓存导致AJAX请求数据异常
IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面标签里,加上以下声明: 保存后,刷新页面,重新访问即可. 说明:最 ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
ajax返回的图片数据格式,jquery发送ajax请求返回数据格式
jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 " "+username+" ...

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

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

思路分析

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

二、jquery利用ajax请求数据

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

jquery利用ajax请求数据渲染二级菜单相关推荐

最新文章

热门文章