PHP+Ajax实现一个简单的二级城市联动

PHP+Ajax实现一个简单的二级城市联动

实现原理

  • 二级联动在开发当中是一个常见的技术点,主要运用在做一些有包含关系的选择,例如,选择地址的时候,要先确定哪个省然后再确定哪个市。二级联动主要涉及到了JavaScript的局部刷新技术Ajax,不同于一般的全局刷新,它不会重新加载整个页面,而是刷新需要改变值的地方,它的工作流程如下:

    • (1) 向后台发送一个请求

    • (2) 后台接受请求,并根据请求的内容返回对应的数据

    • (3) JavaScript将返回的数据呈现在页面上

  • 代码实现并不复杂,而且一样的原理,可以实现更多级的联动,比如在省份的前面再增加一级国家。最后的效果如下:

    在这里插入图片描述

代码实现

  • HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        #area-box{
            width: 500px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #82b8da;
            text-align: center;
        }

        .area-select{
            width: 200px;
            height: 30px;
            margin-top: 100px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="area-box">
        <select class="area-select" id="province">
            <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>
        $(document).ready(function () {
            var url = 'index.php';
            $("#province").change(function () {
                var address = $(this).val();

                $.ajax({
                    type: 'post',
                    url: url,
                    data: {key: address},
                    dataType: 'json',
                    success:function (data) {
                        var status = data.status;
                        if(status == 200){
                            var cities = data.data;
                            var option = '';
                            for(var i=0; i<cities.length; i++){
                                option += '<option>' + cities[i] + '</option>';
                            }
                        }
                        else{
                            var option = '<option>请选择城市</option>';
                        }
                        $("#city").html(option);
                    }
                });
            });
        });
    </script>

</body>
</html>
  • PHP部分
<?php
/**
 * Created by PhpStorm.
 * User: jiangnan
 * Date: 2018/10/8
 * Time: 14:07
 */

$key = $_POST['key'];   //获取post的值

$address[1] = array('福州市','厦门市','泉州市', '漳州市', '南平市', '三明市', '龙岩市', '莆田市', '宁德市');
$address[2] = array('石家庄', '保定市', '秦皇岛', '唐山市', '邯郸市', '邢台市', '沧州市', '承德市', '廊坊市', '衡水市', '张家口');
$address[3] = array('长沙市', '郴州市', '娄底市', '衡阳市', '株洲市', '湘潭市', '岳阳市', '常德市', '邵阳市', '益阳市', '永州市', '张家界', '怀化市');

//判断是否在数据范围内,并进行数据的装载
if(!empty($address[$key])){
    $result['status'] = 200;
    $result['data'] = $address[$key];
}else{
    $result['status'] = 220;
}

echo json_encode($result);  //返回Json数据

?>
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页