使用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
        }    
    }
}

实现效果:

时间: 2024-10-06 20:49:02

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能的相关文章

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

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单html:ssq.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

用jQuery实现省市区三级联动(可做插件)

用jQuery实现省市区三级联动(可做插件) 有参考别的文档,如有雷同,不胜感激 先上效果图 上三级联动代码 city.html <!DOCTYPE html> <html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http

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

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博客讲解是按照两级联动,但下载的资源是三级联动含sql文件. 效果图: 首页核心代码: [html] view plain copy <% List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces(); pag

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

基于thinkphp和ajax的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2,建一个index.html <div> <label>所在地点</label> <select name="province_id" id="province_id" style="width:150px;"

基于ThinkPHP+AJAX的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2,建一个index.html <div> <label>所在地点</label> <select name="province_id" id="province_id" style="width:150px;"