使用PHP+MySql+Ajax+jQuery完结省市区三级联合浮动作效果应

选择PHP+MySql+Ajax+jQuery达成省市区三级联合浮动作效果率

渴求:写3个省市区(大概年月日)的三级联合浮动,完成地点或时间的下拉精选。

落实技术:php ajax

兑现:省级下拉转变时市下拉区下拉进而变动,市级下拉变迁时区下拉随着变化。

使用chinastates表查询

Ajax加载数据

 1.这是chinastates表

图片 1

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 田野),以及 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
        }    
    }
}

金镶玉裹福禄双全效益:图片 2

图片 3图片 4图片 5

 

相关文章