PHP实现二级联动

来源：互联网发布：2017最新网络诈骗编辑：程序博客网时间：2024/06/03 21:12

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。
第一步：我们会向后台发送一个请求
第二步：后台接受请求后，会返回给我们一个值
第三步：将值用JS呈现在页面中

HTML代码

<html><head><title>二级联动</title><meta http-equiv="Content-Type" content="text/html;charset=utf8"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><style>#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}</style><head><body>    <div id="area-box">        <select class="area-select" id='address'>            <option value="0">请选择省份</option>            <option value="1">四川</option>            <option value="2">河北</option>            <option value="3">湖南</option>        </select>        <select class="area-select" id="city">            <option>请选择城市</option>        </select>    </div>    <script>    $(function(){        //初始化数据        var url = 'address.php'; //后台地址        $("#address").change(function(){  //监听下拉列表的change事件            var address = $(this).val();  //获取下拉列表选中的值            //发送一个post请求            $.ajax({                type:'post',                url:url,                data:{key:address},                dataType:'json',                success:function(data){  //请求成功回调函数                    var status = data.status; //获取返回值                    var address = data.data;                    if(status == 200){  //判断状态码，200为成功                        var option = '';                        for(var i=0;i<address.length;i++){  //循环获取返回值，并组装成html代码                            option +='<option>'+address[i]+'</option>';                        }                    }else{                        var option = '<option>请选择城市</option>';  //默认值                    }                    $("#city").html(option);  //js刷新第二个下拉框的值                },            });        });    });    </script></body>

PHP代码

<?php    $key = $_POST['key'];  //获取值    $address[1] = array('成都','绵阳','德阳');    $address[2] = array('石家庄','唐山','秦皇岛');    $address[3] = array('长沙','株洲','湘潭');    if(!empty($address[$key])){ //有值，组装数据        $result['status'] = 200;        $result['data'] = $address[$key];    }else{  //无值，返回状态码220        $result['status'] = 220;    }    echo json_encode($result);  //返回JSON数据?>

这里写图片描述

其实三级联动和二级联动的原理都是一样的，只是在其基础上在重复一次而已

阅读全文

0 0