使用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实现省市区三级联动功能的更多相关文章

  1. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  2. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  3. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  4. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  5. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  6. js&&jQuery实现省市区三级联动

    代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...

  7. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  8. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  9. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

随机推荐

  1. CentOS6 部署 Tomcat

    安装java软件 yum install java-1.8.0* -y 设置开机自启,在/etc/init.d/下新建 tomcat 写入以下内容: #!/bin/bash # /etc/rc.d/i ...

  2. Navicat Premium 12 破解（MySQL、MariaDB、MongoDB、SQL Server、SQLite）

    打开注入到安装目录中的exe中 破解提示(还没好,继续看下去) 如果你安装的是中文版,选一下中文版(英文默认即可),获取一下key(名字和组织可以自定义) 打开Navicat,选择注册(第一次打开选注 ...

  3. javascript Object的新方法

    今天复习es6,又看到Object的一堆方法,与es5的表现又有不一致,耗费了一整天,整理一下: 前几天在司徒正美的书里又看到了es5 Object的字眼,为了向下兼容,大神们也是牛逼的整理出一系列i ...

  4. vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法

    在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示 [vue-language-server] 'v-for' directives require ...

  5. 团体程序设计天梯赛(CCCC) L3014 周游世界 BFS证明

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code

  6. strutrs contextMap

    contextMap(非常重要) 1.动作类的生命周期 明确:动作类是多例的,每次动作访问,动作类都会实例化.所以是线程安全的.与Struts1的区别是,struts1的动作类是单例的. 2.请求动作 ...

  7. day09-(servlet)

    回顾: xml: 可扩展的标签语言 标签可以自定义 作用:配置文件 xml组成: 声明 首行顶格写 元素 <xxx></xxx> <xx/> 属性 <xxx ...

  8. Elastic Stack之ElasticSearch分布式集群yum方式搭建

    Elastic Stack之ElasticSearch分布式集群yum方式搭建 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.搜索引擎及Lucene基本概念 1>.什么 ...

  9. nGrinder TestRunnerInsertMysqlSingle.groovy

    s C:\Users\Lindows\workspace\GroovyTest\src\com\iteye\lindows\mysql\TestRunnerInsertMysqlSingle.groo ...

  10. 【SQL】SQL中on条件与where条件的区别

     #前言 数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: 1.on条件是在生成临时表时 ...