ajax三級聯(lián)動實(shí)現(xiàn)代碼

更新時間：2017年05月23日 09:41:29 作者：ChrissZhao

這篇文章主要為大家詳細(xì)介紹了ajax三級聯(lián)動的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了ajax三級聯(lián)動展示的具體代碼，供大家參考，具體內(nèi)容如下

1. test.php

<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
<title>無標(biāo)題文檔</title>
</head>

<body>
<h1>三級聯(lián)動</h1>
<div id="sanji"></div>

</body>
</html>

2. sanji.js

// JavaScript Document
$(document).ready(function(e) {
 //找到ID=SANJI的DIV，造三個下拉扔進(jìn)去
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 
 //加載省的數(shù)據(jù)
 LoadSheng();
 //加載市的數(shù)據(jù)
 LoadShi();
 //加載區(qū)的數(shù)據(jù)
 LoadQu();
 
 //給省的下拉加點(diǎn)擊事件
 $("#sheng").click(function(){
   //重新加載市
   LoadShi();
   //重新加載區(qū)
   LoadQu();
  })
 //給市的下拉加點(diǎn)擊事件
 $("#shi").click(function(){
   //重新加載區(qū)
   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);
  }
 });
}

//加載區(qū)的方法
function LoadQu()
{
 //找區(qū)的父級代號
 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
//給一個父級代號，返回該父級代號下所有的子地區(qū)
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";
 //執(zhí)行SQL語句返回相應(yīng)的結(jié)果
 //$sql 要執(zhí)行的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)
  {
   //如果是查詢，顯示數(shù)據(jù)
   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;
  }
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: