ajax-三级联动

1. test.php

<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
<title>无标题文档</title>
</head>

<body>
<h1>三级联动</h1>
<div id="sanji"></div>

</body>
</html>

2. sanji.js

// JavaScript Document
$(document).ready(function(e) {
    //找到ID=SANJI的DIV，造三个下拉扔进去
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    
    //加载省的数据
    LoadSheng();
    //加载市的数据
    LoadShi();
    //加载区的数据
    LoadQu();
    
    //给省的下拉加点击事件
    $("#sheng").click(function(){
            //重新加载市
            LoadShi();
            //重新加载区
            LoadQu();
        })
    //给市的下拉加点击事件
    $("#shi").click(function(){
            //重新加载区
            LoadQu();
        })
    
});
//加载省份的方法
function LoadSheng()
{
    //省的父级代号
    var pcode = "0001";
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            var hang = data.trim().split("|");
            var str = "";
            for(var i=0;i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
            }
            $("#sheng").html(str);
        }
    });
}
//加载市的方法
function LoadShi()
{
    //找市的父级代号
    var pcode = $("#sheng").val();
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            var hang = data.trim().split("|");
            var str = "";
            for(var i=0;i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
            }
            $("#shi").html(str);
        }
    });
}

//加载区的方法
function LoadQu()
{
    //找区的父级代号
    var pcode = $("#shi").val();
    $.ajax({
        url:"chuli.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            var hang = data.trim().split("|");
            var str = "";
            for(var i=0;i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
            }
            $("#qu").html(str);
        }
    });
}

3. chuli.php

<?php
//给一个父级代号，返回该父级代号下所有的子地区
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];


$sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

引用的封装类里面返回字符串的方法

<?php
class DBDA
{
    public $host = "localhost";
    public $uid = "root";
    public $pwd = "123";
    public $dbname = "test_123";
    //执行SQL语句返回相应的结果
    //$sql 要执行的SQL语句
    //$type 代表SQL语句的类型，0代表增删改，1代表查询
    function query($sql,$type=0)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        
        $result = $db->query($sql);
        
        if($type)
        {
            //如果是查询，显示数据
            return $result->fetch_all();
        }
        else
        {
            //如果是增删改，返回true或者false
            return $result;
        }
    }
    
    //返回字符串的方法
    public function strquery($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $result = $db->query($sql);
        $arr = $result->fetch_all();
        $str="";
        foreach($arr as $v)
        {
            $str = $str.implode("^",$v)."|";
        }
        
        $str = substr($str,0,strlen($str)-1);
        return $str;

    }
    
    //返回JSON
    function JSONQuery($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $r = $db->query($sql);
        
        if($type==1)
        {
            return json_encode($r->fetch_all(MYSQLI_ASSOC));
        }
        else
        {
            return $r;
        }
    }
}

 

posted @ 2017-05-14 10:50  ChrissZhao  阅读(193)  评论(0)  编辑  收藏  举报