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


Posted in PHP onSeptember 15, 2017

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

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择。

实现技术:php ajax

实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
 </head>
 <style>
 .sanji{
  margin-left: 550px;
  margin-top: 150px;
 }
 </style>
 <body>
  <div class="sanji"> </div>
 </body>

</html>

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

// JavaScript Document

//当页面内容都加载完才执行
$(document).ready(function(e) {
 //加载三个下拉列表
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 
 //加载显示数据
 //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+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";
      }
      $("#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+"<option value='"+data[k].[0]+"'>"+data[k].[0]+"</option>";
      }
      $("#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+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";       
      }
      $("#qu").html(str);      
    }      
  }); 
}

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

<?php
$pcode = $_POST["pcode"];
require_once "./DBDA.class.php";
$db = new DBDA();

$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->JsonQuery($sql,0);

封装类

<?php 
class DBDA{
 public $host="localhost";
 public $uid="root";
 public $pwd="";
 public $dbname="0710_info";
 /* 
  query方法:执行用户给的sql语句,并返回相应的结果
  $sql:用户需要执行的sql语句
  $type:用户需要执行的sql语句的类型
  return:如果是增删语句改返回true或false,如果是查询语句返回二维数组
  */
 public function query($sql,$type=1){//默认true为增删改
  $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{
   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实现省市区三级联动功能示例

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

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

PHP 相关文章推荐
适用于php-5.2 的 php.ini 中文版[金步国翻译]
Apr 17 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
May 19 PHP
PHP获取一个字符串中间一部分字符的方法
Aug 19 PHP
php输入流php://input使用浅析
Sep 02 PHP
php编写的一个E-mail验证类
Mar 25 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
Apr 27 PHP
php metaphone()函数及php localeconv() 函数实例解析
May 15 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
May 20 PHP
php array_keys 返回数组的键名
Oct 25 PHP
thinkPHP5框架接口写法简单示例
Aug 05 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
Mar 03 PHP
php实现通过stomp协议连接ActiveMQ操作示例
Feb 23 PHP
Laravel框架用户登陆身份验证实现方法详解
Sep 14 #PHP
LNMP部署laravel以及xhprof安装使用教程
Sep 14 #PHP
Laravel框架实现redis集群的方法分析
Sep 14 #PHP
ThinkPHP开发--使用七牛云储存
Sep 14 #PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
Sep 13 #PHP
PHP memcache在微信公众平台的应用方法示例
Sep 13 #PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
Sep 13 #PHP
You might like
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
新闻内页-JS分页
2006/06/07 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python进阶教程之异常处理
2014/08/30 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python实现将内容分行输出
2015/11/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
贷款委托书
2014/08/01 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
Python天气语音播报小助手
2021/09/25 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS