ajax的三級聯動菜單欄如何實現

來源：懂視網責編：小OO 時間：2020-11-27 19:57:14

ajax的三級聯動菜單欄如何實現

本文實例為大家分享了ajax三級聯動展示的具體代碼，供大家參考，具體內容如下：1.test.php。<；script src="；../jquery-1.11.2.min.js"；>；<；/script>；<；script src="；sanji.js"；>；<；/script>；<；title>；無標題文檔<；/title>；<；/head>；<；body>；<；h1>；三級聯動<；/h1>；<；p id="；sanji"；>；<；/p>；<；/body>；<；/html>；。2.sanji.js。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了ajax三級聯動展示的具體代碼，供大家參考，具體內容如下：1.test.php。<；script src="；../jquery-1.11.2.min.js"；>；<；/script>；<；script src="；sanji.js"；>；<；/script>；<；title>；無標題文檔<；/title>；<；/head>；<；body>；<；h1>；三級聯動<；/h1>；<；p id="；sanji"；>；<；/p>；<；/body>；<；/html>；。2.sanji.js。

這次給大家帶來ajax的三級聯動菜單欄如何實現，ajax三級聯動菜單欄實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文實例為大家分享了ajax三級聯動展示的具體代碼，供大家參考，具體內容如下

1. test.php

<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
<title>無標題文檔</title>
</head>
<body>
<h1>三級聯動</h1>
<p id="sanji"></p>
</body>
</html>

2. sanji.js

// JavaScript Document
$(document).ready(function(e) {
 //找到ID=SANJI的p，造三個下拉扔進去
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 
 //加載省的數據
 LoadSheng();
 //加載市的數據
 LoadShi();
 //加載區的數據
 LoadQu();
 
 //給省的下拉加點擊事件
 $("#sheng").click(function(){
 //重新加載市
 LoadShi();
 //重新加載區
 LoadQu();
 })
 //給市的下拉加點擊事件
 $("#shi").click(function(){
 //重新加載區
 LoadQu();
 })
 
});
//加載省份的方法
function LoadSheng()
{
 //省的父級代號
 var pcode = "0001";
 $.ajax({
 async:false,
 url:"chuli.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"TEXT",
 success: function(data){
 var hang = data.trim().split("|");
 var str = "";
 for(var i=0;i<hang.length;i++)
 {
 var lie = hang[i].split("^");
 str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 }
 $("#sheng").html(str);
 }
 });
}
//加載市的方法
function LoadShi()
{
 //找市的父級代號
 var pcode = $("#sheng").val();
 $.ajax({
 async:false,
 url:"chuli.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"TEXT",
 success: function(data){
 var hang = data.trim().split("|");
 var str = "";
 for(var i=0;i<hang.length;i++)
 {
 var lie = hang[i].split("^");
 str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 }
 $("#shi").html(str);
 }
 });
}
//加載區的方法
function LoadQu()
{
 //找區的父級代號
 var pcode = $("#shi").val();
 $.ajax({
 url:"chuli.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"TEXT",
 success: function(data){
 var hang = data.trim().split("|");
 var str = "";
 for(var i=0;i<hang.length;i++)
 {
 var lie = hang[i].split("^");
 str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 }
 $("#qu").html(str);
 }
 });
}

3. chuli.php

<?php
//給一個父級代號，返回該父級代號下所有的子地區
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];
$sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

引用的封裝類里面返回字符串的方法

<?php
class DBDA
{
 public $host = "localhost";
 public $uid = "root";
 public $pwd = "123";
 public $dbname = "test_123";
 //執行SQL語句返回相應的結果
 //$sql 要執行的SQL語句
 //$type 代表SQL語句的類型，0代表增刪改，1代表查詢
 function query($sql,$type=0)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 
 $result = $db->query($sql);
 
 if($type)
 {
 //如果是查詢，顯示數據
 return $result->fetch_all();
 }
 else
 {
 //如果是增刪改，返回true或者false
 return $result;
 }
 }
 
 //返回字符串的方法
 public function strquery($sql,$type=1)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 $result = $db->query($sql);
 $arr = $result->fetch_all();
 $str="";
 foreach($arr as $v)
 {
 $str = $str.implode("^",$v)."|";
 }
 
 $str = substr($str,0,strlen($str)-1);
 return $str;
 }
 
 //返回JSON
 function JSONQuery($sql,$type=1)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 $r = $db->query($sql);
 
 if($type==1)
 {
 return json_encode($r->fetch_all(MYSQLI_ASSOC));
 }
 else
 {
 return $r;
 }
 }
}

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

ajax的三級聯動菜單欄如何實現

推薦度：

點擊下載本文 文檔為doc格式

標簽：菜單實現 ajax

熱門焦點

ajax的三級聯動菜單欄如何實現

ajax的三級聯動菜單欄如何實現

ajax的三級聯動菜單欄如何實現

最新推薦

猜你喜歡

熱門推薦