本文實例為大家分享了ajax三級聯動展示的具體代碼，供大家參考，具體內容如下
1. test.php
<script src="../jquery-1.11.2.min.js"></script><script src="sanji.js"></script><title>無標題文檔</title></head><body><h1>三級聯動</h1><div id="sanji"></div></body></html>
2. sanji.js
// JavaScript Document$(document).ready(function(e) { //找到ID=SANJI的DIV，造三個下拉扔進去 $("#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);引用的封裝類里面返回字符串的方法
<?phpclass 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; } }}
新聞熱點
疑難解答
圖片精選
