後臺新增選單資訊如何在前端迴圈遍歷？
阿新 • • 發佈：2019-02-08
後臺管理模組，新增產品照片，產品名稱，產品特點等資訊
圖片.png
前端頁面模組，根據所屬類別展示資訊，點選子選單的時候，會顯示出具體產品特點，產品功能介紹的介面。
圖片.png
主要祖傳程式碼展示：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <base href=" <%=basePath%>"> <title>product</title> <link rel="stylesheet" href="assets/css/amazeui.css" /> <link rel="stylesheet" href="assets/css/common.min.css" /> <link rel="stylesheet" href="assets/css/product.min.css" /> <link rel="stylesheet" href="assets/css/index.min.css" /> <link rel="stylesheet" href="assets/css/style.css" /> <link rel="stylesheet" href="assets/css/example.min.css" /> <link rel="stylesheet" href="assets/css/product.css" /> </head> <body> <div class="layout"> <!-- top --> <%@include file="common/topBar.jsp"%> <div id="list"> <div class="header-box am-hide-sm" data-am-sticky style="background: #f2f2f2; overflow: hidden;"> <div class="nav-contain"> <div class="nav-inner" id="catalog"> </div> </div> </div> </div> <!--作者：王小婷時間：2017-06-23描述：產品--> <div> <ul class=" product-show-ul" id="products"> <!-- <li> <div class="product-content"> <div class="left am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-left"> <img class="product-img" src="assets/images/product/M-SW- MN01.png" /> </div> <div class="right am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-right"> <div class="product-show-title"> <span>M-SW- MN01</span> </div> <div class="product-show-content"> <div class="product-add"> <span>產品特點：</span> <div> <p> 支援GPS/北斗定位，Wifi定位，BLE 連線外設;<br /> </p> <p>3軸IMU感測器，螢幕尺寸1.22;</p> <p>螢幕解析度240*240;</p> <p>方形螢幕形態,350毫安電池大小,觸控式螢幕;</p> </div> </div> <div class="product-add"> <span>產品功能：</span> <div> <p>計步功能,心率檢測;</p> <p>GSM通話功能,SOS緊急呼叫;</p> <p>wifi連線網路;</p> <p>支援網路配置,磁吸充電,語音功能;</p> <p>1M儲存功能;</p> <p>環保材質,防水防塵,消費支付,電子點名,門禁結合;</p> </div> </div> </div> </div> <div class="clear"></div> </div> </li> --> </ul> </div> <!-- 底部 --> <%@include file="common/sideBar.jsp"%> </div> <script src="assets/js/jquery-2.1.0.js" charset="utf-8"></script> <script src="assets/js/amazeui.js" charset="utf-8"></script> <!--返回頂部--> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script> <script type="text/javascript"> $(document).ready(function() { $.fn.yestop(); }); //載入產品目錄 $.ajax({ url : "/intmote/productMenu.do", type : "get", success : function(data) { //遍歷拼接html var htm = ''; for (var i = 0; i < data.length; i++) { var type = data[i].productType; htm+='<ul class="product-model" onClick="showProducts(\''+type+'\')">'; htm+='<li class="product-title">'+data[i].productType+'</li>'; var list = data[i].products; //遍歷產品 for(var j = 0; j < list.length; j++){ htm+='<li>'+list[j].productName+'</li>'; } htm+='</ul>'; } $("#catalog").html(htm); }, error : function(data) { alert("獲取產品選單失敗") } }); function showProducts(type){ $.ajax({ url : "/intmote/products.do?type="+type, type : "get", success : function(data) { //遍歷拼接html var htm = ''; for (var i = 0; i < data.length; i++) { htm+='<li><div class="product-content"><div class="left am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-left">'; htm+='<img class="product-img" src="'+data[i].productUrl+'" /></div>'; htm+='<div class="right am-u-sm-12 am-u-md-6 am-u-lg-6 recruit-right">'; htm+='<div class="product-show-title"><span>'+data[i].productName+'</span></div>'; htm+='<div class="product-show-content"><div class="product-add"><span>產品特點：</span><div>'; htm+='<p>'+data[i].productPoint+'</p>'; htm+='</div></div><div class="product-add"><span>產品功能：</span><div>'; htm+='<p>'+data[i].productFunc+'</p>'; htm+='</div></div></div></div></div></li>'; } $("#products").html(htm); }, error : function(data) { alert("獲取產品失敗") } }); } //產品選單的顯示和隱藏 $(function() { $("#list").hide(); $("#menu").hover(function() { $("#list").show(); }, function() { $("#list").hide(); }) // 滑鼠移動到list的div上的時候list div不會被隱藏 $("#list").hover(function() { $("#list").show(); }, function() { $("#list").hide(); }) }); </script> </body> </html>