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

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

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

实现技术：php ajax

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

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

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实现省市区三级联动功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • PHP+Ajax 网站SEO查询工具 提供代码第1/3页

    # Name: PHP+Ajax 网站SEO查询工具 # Author: 年华<nianhua.liu@gmail.com> [Q:4908220] # Homepage:http://master8.net 使用说明:1.服务器必须至少支持allow_url_fopen,curl,fsockopen中的一种,具体请咨询服务器管理员. 2.请尊重别人的劳动成果!你可以任意修改并使用此程序,但不允许修改后公开发布!传播此程序亦应保持此压缩包完整性! 3.如果在使用中遇到任何问题,请访问http:

  • PHP+原生态ajax实现的省市联动功能详解

    本文实例讲述了PHP+原生态ajax实现的省市联动功能.分享给大家供大家参考,具体如下: Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户. XMLHttpRequest XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,但

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • php+ajax实现仿百度查询下拉内容功能示例

    php+ajax实现仿百度查询下拉内容功能示例

    本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquer

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id. 数据库有内容后,就可以开始写代码,进行二级联动的实现. 先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出. Html代码: 复制代码 代码如下: <select name="type" s

  • Thinkphp结合AJAX长轮询实现PC与APP推送详解

    前言 本文主要给大家介绍的关于Thinkphp结合AJAX长轮询实现PC与APP推送的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍. 实现逻辑 某个操作(比如新建一条公告)后,触发同时推送消息给APP或是移动WEB的所有用户或指定用户. 不论性能,总还是有人会用到吧,实现如下(基于Thinkphp5消息推送): PHP长轮询 /* * long轮询 API查询接口 */ public function id_log() { if (request()->isPost()) {

  • php+mysql+ajax实现单表多字段多关键词查询的方法

    php+mysql+ajax实现单表多字段多关键词查询的方法

    本文实例讲述了php+mysql+ajax实现单表多字段多关键词查询的方法.分享给大家供大家参考,具体如下: 单表多字段查询在一些稍微复杂一点的查询中十分有用.这里主要利用MySQL数据库中的concat函数实现单表多字段多关键词查询.并且显示查询结果的表格可根据所选数据表动态生成. html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><

  • PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】

    导读: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 不废话,直接上代码,整段代码分为前后两段代码,具体代码如下所示. 前台: <?php <br>$category=$this->getMyVal('category',$_GET);<br>

  • AJAX for PHP简单表数据查询实例

    功能介绍:AJAX WebShop 3从Beta2开始支持PHP的开发了,AJAX WebShop集成了PHP5的开发环境,因此不需要额外安装配置PHP,本例将实现一个AJAX for PHP的简单数据查询操作,这个例子是单表操作,也可以实现主从表的数据查询. 一.数据表说明 例子采用了Access数据库,当然你也可以使用mysql 或其他类型数据库,数据库名称为:demo.mdb,表名为product,创建字段分别是PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE

  • PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_

随机推荐