zoukankan      html  css  js  c++  java
  • php省市联动实现

    设计模式:ajax实现,数据库格式:id,name,parent_id

    数据库:

    CREATE TABLE IF NOT EXISTS `city` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(30) DEFAULT NULL,
      `parent_id` int(11) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=26 ;
    
    
    INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES
    (1, '安徽', 0),
    (2, '浙江', 0),
    (3, '亳州', 1),
    (4, '合肥', 1),
    (5, '巢湖', 1),
    (6, '涡阳', 3),
    (7, '蒙城', 3),
    (8, '利辛', 3),
    (9, '谯城', 3),
    (10, '杭州', 2),
    (11, '宁波', 2),
    (12, '温州', 2),
    (13, '义乌', 2),
    (14, '嘉兴', 2),
    (15, '巢湖', 4),
    (16, '阜阳', 1),
    (17, '界首', 16),
    (18, '泥鳅', 16),
    (19, '拱墅区', 10),
    (20, '江干区', 10),
    (21, '临湖镇', 6),
    (22, '立德镇', 5),
    (23, '标里镇', 6),
    (24, '花沟镇', 6),
    (25, '义门镇', 6);

    HTML代码:

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <style type="text/css">
    h2{
        text-align:center;
        color:red;
    }
    .div{
        width:500px;
        height:300px;
        border:1px solid gray;
        margin:auto;
        text-align:center;
        padding-top:30px;
    }
    .div select{
        width:80px;
        height:25px;
        color:green;
    }
    </style>
    </head>
    
    <script type="text/javascript">
    
    function deal(value,next){
        var Next=document.getElementById(next);
    
        //删除节点
        var oP=Next.getElementsByTagName("option");
        for(var i=oP.length-1;i>=1;i--){
                oP[i].parentNode.removeChild(oP[i]);
            }
    
        
        //创建ajax引擎
        var xmlhttp="";
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
        }
        
        //判断状态是否满足条件
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                var val=xmlhttp.responseText;
    //             alert(val);
                var object=eval("("+val+")");
                for(var k in object){
                    //创建节点
                    var oPt=document.createElement("option");
                    //添加属性和值
                    oPt.setAttribute('value',object[k]['name']);
                    Next.appendChild(oPt);
                    oPt.innerHTML=object[k]['name'];
                }
                }
            }
        var url="deal.php";
        var data="name="+value;
        //打开
        xmlhttp.open("post",url,true);
        
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须加上
        //发送数据
        xmlhttp.send(data);
    }
    
    window.onload=function(){
    
        deal(null,"sheng");
    }
    </script>
    
    
    <body>
        <h2>省市联动AJAX实现</h2>
        <div class="div">
            <form action="Act.php" method="post">
                <!-- 省级标签 -->
                <select name="sheng" id="sheng" onchange="deal(this.value,'shi')">
                <option></option>
                </select>
                
                <!-- 市级标签 -->
                <select name="shi" id="shi" onchange="deal(this.value,'xian')">
                <option></option>
                </select>
                
                <!-- 县级标签 -->
                <select name="xian" id="xian" onchange="deal(this.value,'zhen')">
                <option></option>
                </select>
                
                <!-- 镇级标签 -->
                <select name="zhen" id="zhen">
                <option></option>
                </select>
                <input type="submit" value="提交"/>
            </form>
        </div>
    
    </body>
    
    </html>

    php后台处理:

    <?php 
    header("content-type:text/html;charset=utf-8");
    
    $name=$_POST['name'];
    
    //连接数据库
    $conn=mysqli_connect("localhost","root","");
    if(!$conn){
        die("连接数据库失败");
    }
    
    //设置字符集
    mysqli_query($conn, "set names utf8");
    
    //选择数据库
    mysqli_select_db($conn, "city");
    
    $sql="select id from city where name="."'$name';";
    
    $res=mysqli_query($conn, $sql);
    if(mysqli_num_rows($res)>0){
        $row=mysqli_fetch_assoc($res);
        $id=$row['id']; 
    }else{
        $id=0;
    }
    
    $sql="select * from city where parent_id=".$id;
    
    $res=mysqli_query($conn, $sql);
    $arr=array();
    if(mysqli_num_rows($res)>0){
        while($row=mysqli_fetch_assoc($res)){
            $arr[]=$row;
        }
    }
    
    foreach ($arr as $k=>$v){
        
        @$str.='{"name":'.'"'.$v['name'].'","parent_id":'.'"'.$v['parent_id'].'","id":'.'"'.$v['id'].'"},';
        
    }
    
    echo "[".$str."]";
    
    
    // echo '[{"name":"安徽","parent_id":"0"},{"name":"浙江","parent_id":"0"},{"name":"吉林","parent_id":"0"},]';
    
    
    
    ?>

    实现效果:

  • 相关阅读:
    基于CNN目标检测方法(RCNN,Fast-RCNN,Faster-RCNN,Mask-RCNN,YOLO,SSD)行人检测
    2019小学三年级寒假英语课外阅读推荐
    Mask_RCNN Github
    基于CNN目标检测方法(RCNN,Fast-RCNN,Faster-RCNN,Mask-RCNN,YOLO,SSD)行人检测,目标追踪,卷积神经网络
    OPC UA 和 MQTT
    IoT网关协议比较:MQTT,CoAp,XMPP,MBUS,OPC UA
    MQTT 入门介绍
    opcua-commander
    什么是OPC UA?
    Python迭代器与生成器
  • 原文地址:https://www.cnblogs.com/yhqq512/p/7061920.html
Copyright © 2011-2022 走看看