AJAX 三级联动
新的封装类
<?php class DBDA { public $host="localhost";//服务器地址 public $uid="root";//用户名 public $pwd="";//密码 public $conn;//连接对象 //操作数据库的方法 //$sql代表需要执行的SQL语句 //$type代表SQL语句的类型，1代表查询，0代表增删改 //$db代表要操作的数据库名称 //如果是查询，返回二维数组 //如果是其他语句，返回true或false function __construct($db="bilibili") { //造连接对象 $this->conn = new MySQLi($this->host,$this->uid,$this->pwd,$db); } public function Query($sql,$type=1) { //判断是否出错 !mysqli_connect_error() or die("连接失败！"); //执行SQL语句 $result = $this->conn->query($sql); //判断SQL语句类型 if($type==1) { //如果是查询语句,返回结果集的二维数组 return $result->fetch_all(); } else { //如果是其他语句,返回true或false return $result; } } //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="bilibili") { //定义数据源 $dsn = "mysql:dbname={$db};host={$this->host}"; //造pdo对象 $pdo = new PDO($dsn,"{$this->uid}","{$this->pwd}"); //准备执行SQL语句 $st = $pdo->prepare($sql); //执行预处理SQL语句 if($st->execute()) { if($type==1) { $sttr = $st->fetchAll(PDO::FETCH_ASSOC); return json_encode($attr); } else { if($st) { return "OK"; } else { return "NO"; } } } else { echo "执行失败！"; } } //Ajax调用返回字符串 public function StrQuery($sql,$type=1) { //判断连接是否成功 !mysqli_connect_error() or die("连接失败！"); //执行SQL语句 $result = $this->conn->query($sql); //判断SQL语句类型 if($type==1) { $attr = $result->fetch_all(); $str = ""; //如果是查询语句返回字符串 for($i=0;$i<count($attr);$i++) { for($j=0;$j<count($attr[$i]);$j++) { $str = $str.$attr[$i][$j]; $str = $str."^"; } $str = substr($str,0,strlen($str)-1); $str = $str."|"; } $str = substr($str,0,strlen($str)-1); return $str; } else { //如果是其他语句,返回true或false if($result) { return "OK"; } else { return "NO"; } } } function PdoQuery($sql,$type=1,$db="bilibili") { //造数据源 $dns = "mysql:host={$this->host};dbname={$db}"; //造pdo对象 $pdo = new PDO($dns,$this->uid,$this->pwd); //准备一条SQL语句 $stm = $pdo->prepare($sql); //执行预处理语句 $r = $stm->execute(); if($r) { if($type==1) { return $stm->fetchAll(); } else { return "OK"; } } else { return "NO"; } } }
三级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head> <body> <div id="sanji"></div> </body> </html>
$(document).ready(function(e) { var zhuti="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanji").html(zhuti); //填充省 fillsheng(); //填充市 fillshi(); //填充区 fillqu(); //当省选中变化的时候去填充市和区 $("#sheng").change(function(){ //填充市 fillshi(); //填充区 fillqu(); }) //当市选中变化的时候去填充区 $("#shi").change(function(){ //填充区 fillqu(); }) }); //填充省的方法 function fillsheng() { //省的父级代号 var pcode="0001"; //调AJAX $.ajax({ async:false, //关闭异步，开启同步 url:"AJAX4chuli.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 fillshi() { //取到市的父级代号 var pcode=$("#sheng").val(); //调用AJAX $.ajax({ async:false, url:"AJAX4chuli.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 fillqu() { //找到区的父级代号 var pcode=$("#shi").val(); //调用AJAX $.ajax({ url:"AJAX4chuli.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); } }) }
<?php include("DBDA.php"); $db = new dbda(); //接收父级代号 $pcode = $_POST["pcode"]; //根据父级代号查子级区域 $sql = "select * from ChinaStates where ParentAreaCode='{$pcode}'"; echo $db->StrQuery($sql);
AJAX：异步AJAX
异步：
1.数据传输：收发数据的时候不用等到对方接收，可以继续发送
2.AJAX：在调用处理页面处理数据的时候，下面的代码可以继续执行，效率高
同步：
1.数据传输：收发数据的时候要等到对方接收成功，才可以继续发送下一个
2.AJAX：在调用处理页面处理数据的时候，下面的代码不能执行，只有当AJAX完全执行完之后，才能继续执行下面代码
