封装的三级联动及应用

Posted 2020-06-14

封装好的JS方法

sanjiliandong.js

$(document).ready(function(e) {
    
    $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");
    
    FillSheng();
    FillShi();
    FillQu();
    
    $("#sheng").change(function(){
        
        FillShi();
        FillQu();
        
        })
    $("#shi").change(function(){
        FillQu();
        })
    
    function FillSheng()
    {
        var code = "0001";
        
        $.ajax({
            async:false, //异步
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            datatype:"TEXT",
            success: function(data){
                
                    var hang = data.split(‘|‘);
                    var s = "";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split(‘^‘);
                        s = s+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    
                    $("#sheng").html(s);
                
                }
            
            });
    }
    
    function FillShi()
    {
        
        var code = $("#sheng").val();
        
        $.ajax({
            async:false, //异步
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            datatype:"TEXT",
            success: function(data){
                
                    var hang = data.split(‘|‘);
                    var s = "";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split(‘^‘);
                        s = s+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    
                    $("#shi").html(s);
                
                }
            
            });
    }
    
    function FillQu()
    {
        var code = $("#shi").val();
        $.ajax({
            async:false,
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            datatype:"TEXT",
            success: function(data){
                
                    var hang = data.split(‘|‘);
                    var s = "";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split(‘^‘);
                        s = s+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    
                    $("#qu").html(s);
                
                }
            
            });
    }
    
    
});

负责处理及连接数据库的页面代码:

1.处理界面源代码

chuli.php

<?php
include("mydbda.php");

$code = $_POST["code"];

$sql = "select * from ChinaStates where ParentAreaCode = ‘".$code."‘";

$db = new mydbda();
$str = $db->Select($sql,"CX","企业黄页");
echo $str;
?>

2.连接数据库代码

mydbda.php

<?php
    class mydbda
    {
        var $host = "localhost";
        var $username = "root";
        var $password = "123";
        var $database = "企业黄页";
        
        /**
            功能：执行SQL语句，返回结果
            参数：$sql:要执行的SQL语句
                 $type：SQL语句的类型，CX代表查询，QT代表其他
                 $data:要操作的数据库
            返回值：如果是查询，返回结果集
                  如果是其他语句，执行成功返回OK，失败返回NO
        */
        function Select($sql,$type,$data)
        {
            
            //1.造连接对象
            $db = new mysqli($this->host,$this->username,$this->password,$data);
            
            //2.判断是否连接成功
            if(mysqli_connect_error())
            {    
                echo "连接失败";
                
                //退出整个程序
                exit;
            }
            else
            {
                //4.执行SQL语句
                
                $result = $db->query($sql);
                
                if($type == "CX")
                {
                    $str = "";
                    
                    while($row = $result->fetch_row())
                    {
                        for($i=0;$i<count($row);$i++)
                        {
                            $str=$str.$row[$i]."^";
                        }
                        $str = substr($str,0,strlen($str)-1);
                        $str = $str."|";
                        
                    }
                    $str = substr($str,0,strlen($str)-1);
                    return $str;
                }
                else
                {
                    if($result)
                    {
                        return "OK";
                    }
                    else
                    {
                        return "NO";
                    }
                }
                
        
            }
        }

        
    
    }
?>

主页面源代码

sanji.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.2.min.js"></script>
<script src="sanjiliandong.js"></script>
<title>无标题文档</title>
</head>

<body>

<div>

<div id="sanji"></div>


</div>

</body>



</html>