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

应用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

 

相关文章