怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單

這篇文章主要講解了“怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單”吧！

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元秀山土家族苗族做網(wǎng)站,已為上家服務(wù),為秀山土家族苗族各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

數(shù)據(jù)庫

我們先看一下簡單的數(shù)據(jù)庫表的設(shè)計(jì)。主要涉及到一個(gè)分類表，包含了4個(gè)字段cat_id，name，parent，media。

CREATE TABLE `categories`  (  `cat_id` int(11) NOT NULL AUTO_INCREMENT,  `name` varchar(150) ,  `parent` int(11) ,  `media` varchar(100),  PRIMARY KEY (`cat_id`)  );

數(shù)據(jù)表categories中的分類和子分類的數(shù)據(jù)存儲(chǔ)類似下面的格式。

商品分類表數(shù)據(jù)格式

categories.php

這個(gè)文件主要負(fù)責(zé)從categories表生成json數(shù)據(jù)，供前臺(tái)來顯示分類菜單。

<?php  include('db.php');  $sql = MySQL_query("select cat_id,name,media from categories where parent=0");  // parent categories node  $categories = array("Categories" => array());   while ($row = mysql_fetch_array($sql))  {  $cat_id = $row['cat_id'];  $ssql = mysql_query("select cat_id,name,media from categories where parent='$cat_id'");   // single category node  $category = array(); // temp array  $category["cat_id"] = $row["cat_id"];  $category["name"] = $row["name"];  $category["media"] = $row["media"];  $category["sub_categories"] = array(); // subcategories again an array   while ($srow = mysql_fetch_array($ssql))  {  $subcat = array(); // temp array  $subcat["cat_id"] = $srow['cat_id'];  $subcat["name"] = $srow['name'];  // pushing sub category into subcategories node  array_push($category["sub_categories"], $subcat);  }   // pushing sinlge category into parent  array_push($categories["Categories"], $category);  }  echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';  ?>

JSON 輸出的格式

json數(shù)據(jù)格式

JavaScript & HTML

實(shí)際上最重要的部分在這里，我們需要使用$.getJSON來附加分類數(shù)據(jù)到UL #menu_ul元素上，子目錄數(shù)據(jù)存儲(chǔ)在隱藏的UL 類名hideul。

<script type="text/javascript" src="http://ajax.googleapis.com/  ajax/libs/jquery/1.6.2/jquery.min.js"></script>  <script type="text/javascript" >  $(document).ready(function()  {   $.getJSON("categories.php?callback=?", function(data)  {  $.each(data.Categories, function(i, category)  {  var subjsondata='';  $.each(category.sub_categories, function(i, sub_categories)  {  subjsondata += "<li>"+sub_categories.name+"</li>";  });  var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul>  </li>";  $(jsondata).appendTo("#menu_ul");  });  }  );   //MouseOver on Categories  $(".category").live('mouseover',function(event)  {  $("#menu_slider").show();  var D=$(this).html();  var id=$(this).attr('id');  var V=$("#hide"+id).html();  var M=$("#hide"+id).attr("media");  $("#submenu_ul").html(V);  $("#menu_slider h4").html(D);  //Background Image Check  if(M!='null')  {  $("#menu_slider").css({"width": "450px"});  }  else {  $("#menu_slider").css({"width": "250px"});  }  $("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');  });   //Document Click  $(document).mouseup(function()  {  $("#menu_slider").hide();  });   //Mouse click on sub menu  $("#menu_slider").mouseup(function(){ return false });   //Mouse click on my account link  $("#menu_box").mouseup(function(){ return false });  });  </script>

$(".category").live('mouseover',function(event){}- category 分類標(biāo)簽li的類名。使用attr("id") 調(diào)用分類標(biāo)簽li的值，根據(jù)ID的類名移動(dòng).hideul 子目錄的值到$("#submenu_ul").html(V)。

HTML 代碼

//HTML Code  <div id='menu_box' class='shadow'> <ul id='menu_ul'></ul> </div> <div id='menu_slider'> <h4></h4> <ul id='submenu_ul'></ul> </div>

db.php

數(shù)據(jù)庫配置文件

<?php  $mysql_hostname = "localhost";  $mysql_user = "username";  $mysql_password = "password";  $mysql_database = "databasename";  $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");  mysql_select_db($mysql_database, $bd) or die("Could not select database");  ?>

CSS

#menu_box  {  border-top:solid 3px #333;  border-left:solid 1px #dedede;  border-right:solid 1px #dedede;  border-bottom:solid 1px #dedede;  min-height:400px;width:200px;  background-color:#fff;  margin-left:20px;  float:left;  position:relative;  z-index:300 }  #menu_slider  {  border-top:solid 3px #333;  border-left:solid 1px #dedede;  border-right:solid 1px #dedede;  border-bottom:solid 1px #dedede;  min-height:370px;background-color:#fff;margin-left:220px;  position:absolute;  width:250px;  position:relative;  z-index:200;  display:none;  padding:15px }  .hideul{display:none}

感謝各位的閱讀，以上就是“怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享標(biāo)題：怎么用json數(shù)據(jù)來制作商城的產(chǎn)品分類菜單
網(wǎng)站鏈接：http://bm7419.com/article32/igopsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)