使用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. pandas isin

    在已知id索引的情况下,如何获取所需要的行呢?已经不止一次遇到这样的情况,经历过重重筛选,所得到的最终结果是一串满足所有条件的id列表. pandas 的isin 能很好的解决这个问题, import ...

  2. 关于Ubuntu18.04谷歌浏览器经常卡死的解决

    老电脑本来用的是Win系列,后来改成Linux后就不卡了,这几天同Notebook运行的Script开始复杂了,Ubuntu经常卡死(发公众号也经常卡死),本来以为是Ubuntu的问题 后来一想,不对 ...

  3. Luogu--3381 【模板】最小费用最大流

    题目链接 3381 [模板]最小费用最大流 手写堆版本 dijkstra   400+ms 看来优先队列的常数好大 #include<bits/stdc++.h> using namesp ...

  4. Listener监听器和Filter过滤器

    Listener监听器 WEB中的监听器 WEB 中的 Listener 和 Filter 是属于 Servlet 规范中的高级的技术.WEB中的监听器共有三类八种(监听三个域对象)* 事件源:Ser ...

  5. A1107. Social Clusters

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  6. request 的介绍使用属性

    上下文:相当于一个容器,保存了 Flask 程序运行过程中的一些信息. Flask中有两种上下文,请求上下文和应用上下文 请求上下文(request context) 在 flask 中,可以直接在视 ...

  7. iconv: iconv_open(pToCharset, pFromCharset); 的附加参数//IGNORE

    今天在转换一个文件时iconv() 老是返回 -1, 提示编码转换失败. 一共 30 多个文件, 原编码都是一样的,为什么有的转换会失败,返回 -1呢? 网上搜索了一下, 找到一个随加参数: //IG ...

  8. python的变量与注释

    1.         变量 变量:值会发生变化的量,与常量相对. Python有五个标准的数据类型:1. 数字(int,long,float,complex)    2.字符串    3.元组    ...

  9. tail 命令只查看日志中的关键字所在行信息

    tail -f info_log-2019-04-20.log |grep 要查询的关键字

  10. Game1---游戏设计

    自己玩的一些游戏简单策划 先设计3个类似的游戏场景,第一个场景只进行时间限制,第二个场景道具进行上下移动,第三个场景随机生成敌人: 1.上面的台阶道具应该是随着人物的高度上升逐渐生成,逐渐呈现在玩家的 ...