云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据

本文主要是介绍云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

之前部署的网站 html 内容都是静态写死的，现在需要替换为接口获取数据展示
在这里插入图片描述

<div class="col-lg-4 col-md-6 col-xs-12 active textCenter"><div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s"><div class="title"><h3><a href="https://nodejs.org/en/about" target="_blank">Nodejs</a></h3></div><ul class="description"><p class="price-value">基于 Chrome V8 解析引擎的Js运行时环境。</p></ul></div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter"><div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s"><div class="title"><h3><a href="https://www.mongodb.com/try/download/community" target="_blank">mongodb</a></h3></div><ul class="description"><p class="price-value">前端开发人员普遍使用的数据库。</p></ul></div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter"><div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s"><div class="title"><h3><a href="https://cn.vuejs.org/" target="_blank">Vue</a></h3></div><ul class="description"><p class="price-value">渐进式/适用场景丰富的 Web 前端框架。</p></ul></div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter"><div class="table wow fadeInLeft" data-wow-delay="1.2s"><div class="title"><h3><a href="https://react.docschina.org/" target="_blank">React</a></h3></div><ul class="description"><p class="price-value">react中文文档，Web 和原生交互界面的库</p></ul></div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 textCenter"><div class="table wow fadeInRight" data-wow-delay="1.2s"><div class="title"><h3><a href="https://angular.cn/" target="_blank">Angular</a></h3></div><ul class="description"><p class="price-value">angular中文文档，构建未来的 Web 开发框架</p></ul></div>
</div><div class="col-lg-4 col-md-6 col-xs-12 textCenter"><div class="table wow fadeInLeft" data-wow-delay="1.2s"><div class="title"><h3><a href="https://element-plus.org/zh-CN/" target="_blank">Element Plus</a></h3></div><ul class="description"><p class="price-value">基于 Vue 3，面向设计师和开发者的UI组件库</p></ul></div>
</div>

这些重复的代码结构简化为动态数据循环渲染

<div id="menuList"></div>

<script>function getMenu(tokens) {$.ajax({url: "http://xx.xx.xx.xx:8090/api/func/funcMenu", // 设置请求地址type: "get", // 或者"POST"等其他HTTP请求类型headers: {      //请求头Authorization: tokens, //这是获取的token},dataType: "json", // 指定返回结果的格式为JSONdata: {}, // 传递参数，这里的key-value对应于后台接收参数时的名称与值success: function(response) {var menuList = response.data// 自定义字符串,用于拼接标签var menuStr = "";menuList.forEach(e => {menuStr += `<div class="col-lg-4 col-md-6 col-xs-12 active textCenter"><div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s"><div class="title"><h3><a href="${e.url}" target="_blank">${e.name}</a></h3></div><ul class="description"><p class="price-value">${e.desc}</p></ul></div></div>`;})// 拼接完字符串数组后用innerHTML把它渲染到页面中document.getElementById("menuList").innerHTML = menuStr;},error: function() {console.log("失败");}});  }function login() {$.ajax({url: "http://xx.xx.xx.xx:8090/api/user/login", // 设置请求地址type: "post", // 或者"POST"等其他HTTP请求类型dataType: "json", // 指定返回结果的格式为JSONdata: {username: 'admin', password: '123456'}, // 传递参数，这里的key-value对应于后台接收参数时的名称与值success: function(response) {getMenu(response.token)},error: function() {console.log("失败");}});  }login()</script>