使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

php  /  管理员 发布于 7年前   159

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

2.做一个简单php：Ajax_eg.php

3.根据前一个页面做jquery：Ajax_ssq.js

// JavaScript Document//当页面内容都加载完才执行$(document).ready(function(e) { //加载三个下拉列表 $("#sanji").html("");  //加载显示数据 //1.加载省份 LoadSheng(); //2.加载市 LoadShi(); //3.加载区 LoadQu(); //当省份选中变化，重新加载市和区 $("#sheng").change(function(){ //当元素的值发生改变时，会发生 change 事件,该事件仅适用于文本域（text field），以及 textarea 和 select 元素。  //加载市   LoadShi();  //加载区   LoadQu();    })  //当市选中变化，重新加载区 $("#shi").change(function(){  //加载区  LoadQu();  })   });//加载省份信息function LoadSheng(){ //取父级代号 var pcode ="0001";  //根据父级代号查数据 $.ajax({    //取消异步，也就是必须完成上面才能走下面    async:false,    url:"load.php",    data:{pcode:pcode},    type:"POST",    dataType:"JSON",    success: function(data){      var str="";      //遍历数组，把它放入sj      for(var k in data){       str=str+""+data[k].[1]+"";      }      $("#sheng").html(str);          }        }); }//加载市信息function LoadShi(){ //取父级代号 var pcode =$("#sheng").val();  //根据父级代号查数据 $.ajax({    //取消异步，也就是必须完成上面才能走下面    async:false,    url:"load.php",    data:{pcode:pcode},    type:"POST",    dataType:"JSON",    success: function(data){      var str="";      //遍历数组，把它放入sj      for(var k in data){       str=str+""+data[k].[0]+"";      }      $("#shi").html(str);          }        }); }//加载区信息function LoadQu(){ //取父级代号 var pcode =$("#shi").val();  //根据父级代号查数据 $.ajax({    //不需要取消异步    url:"load.php",    data:{pcode:pcode},    type:"POST",    dataType:"JSON",    success: function(data){      var str="";      //遍历数组，把它放入sj      for(var k in data){       str=str+""+data[k].[1]+""; }      $("#qu").html(str);          }        }); }

4.再把数据库连接起来 :load.php,把DBDA重新加载一个方法：JsonQuery

JsonQuery($sql,0);

封装类

host,$this->uid,$this->pwd,$this->dbname);  if(mysqli_connect_error()){   return "连接失败!";   }  $result = $db->query($sql);  if($type==1){   return $result;//增删改语句返回true或false  }else{   return $result->fetch_all();//查询语句返回二维数组  }  } //此方法用于ajax中用于对取出的数据（二维数组）进行拼接字符串处理 public function StrQuery($sql,$type=1){  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);  if(mysqli_connect_error()){   return "连接失败!";   }  $result = $db->query($sql);  if($type==1){   return $result;//增删改语句返回true或false  }else{   $arr = $result->fetch_all();//查询语句返回二维数组   $str = "";   foreach($arr as $v){    $str = $str.implode("^", $v)."|";   }   $str = substr($str, 0,strlen($str)-1);   return $str;  }  }  //此方法用于ajax中用于返回为json数据类型时使用 public function JsonQuery($sql,$type=1){  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);  if(mysqli_connect_error()){   return "连接失败!";   }  $result = $db->query($sql);  if($type==1){   return $result;//增删改语句返回true或false  }else{   $arr = $result->fetch_all();//查询语句返回二维(关联)数组   return json_encode($arr);//将数组转换成json  }  }}

实现效果：

以上这篇使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

• jquery+php后台实现省市区联动功能示例
• jquery+ajax实现省市区三级联动 （封装和不封装两种方式）
• jquery+ajax实现省市区三级联动效果简单示例
• 省市区三级联动jquery实现代码
• JSON+Jquery省市区三级联动
• 基于jquery实现省市区三级联动效果
• jquery实现的省市区三级联动
• jQuery select表单提交省市区城市三级联动核心代码
• 基于jquery & json的省市区联动代码
• layui自定义插件citySelect实现省市区三级联动选择