动PHP+MySql+Ajax+jQuery实现省购买区三级联动作用

务求:写一个探视购买区(或者年月日)的老三层联动,实现地区或时刻之下拉选择。

兑现技能: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 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
        }    
    }
}

落实力量:图片 2

图片 3图片 4图片 5

 

相关文章

网站地图xml地图