mysql php ajax 使用jsonp跨域完成省市三级联动

mysql php ajax 使用jsonp跨域完成省市三级联动

mydb.sql

用到了area，city，province 三个表

 

 cont.php 连接数据库

 

data2.php 得到前端传过来的值，处理SQL语句，输出内容。因为使用jsonp方式，就是输出函数名里面加上参数就可以了。ajax的跨域问题可以看我ajax的文章

<?php
require_once('cont.php');

$code = $_GET['citycode'];
$callback = $_GET['callback'];
$flag = $_GET['flag'];

if($flag == 1){
    $retval= mysqli_query($conn,"select * from province order by id");
}else if($flag == 2){
    $retval= mysqli_query($conn,"select * from city where provincecode = '".$code."' order by id" );
}else if($flag == 3){
    $retval= mysqli_query($conn,"select * from area where citycode = '".$code."' order by id" );
}



// 创建一个空数据
$sayList = [];
// 循环遍历得到数据库内容
while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)){
    
    $sayList[]= array('code'=>$row['code'],'name'=>$row['name']);//二维数组
   
}
// // 数组长度
// echo count($sayList);
// // 数组结构
// print_r($sayList);
// 循环遍历
// for($i=0;$i<11;$i++){
//     for($j=0;$j<2;$j++){
//         echo $sayList[$i]['code']."-->".$sayList[$i]['name'];                
//     }
// }

if($sayList){
    echo $callback.'('.json_encode($sayList).')';
}else{
    echo $callback.'('.'[]'.')';
}

?>

select.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
        #showInfo{
            position: absolute;
            width: 600px;
            height: 500px;
            overflow-y: scroll;
            overflow-x: hidden;
            background: lightgreen;
            left: 50%;
            margin-left: -300px;
        }
        #showInfo div{
            float:left;
            margin-left: 30px;
            margin-top: 30px;
            width: 160px;
        }
        #showInfo div select{
            width: 160px;
        }
        </style>
    </head>
    <body>
        <div id="showInfo">
            <div>
                <select id="province">
                </select>
            </div>
            <div>
                <select id="city">
                </select>
            </div>
            <div>
                <select id="area">
                </select>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function(){
                //获取列表数据的通用方法
                function getList(code,flag,callback){
                    $.ajax({
                        url:'data2.php',
                        type:'get',
                        dataType:"jsonp",
                        data:{citycode:code,flag:flag},
                        success:callback
                    });
                }
                
                //获取地区信息的回调函数
                var area = function(data){
                    $.each(data,function(i,element){
                        var op = $("<option></option>").attr("value",data[i].code).append(data[i].name);
                        $("#area").append(op);
                    });
                }                
                
                // 拼接市
                var city=function(data){
                    for (var i = 0; i <data.length; i++) {
                        var op = $("<option></option>").attr("value",data[i].code).append(data[i].name);
                        $("#city").append(op);
                    }
                    // 判断是否是直辖市，即只有一个市
                    if(data.length == 1){
                        var citycode = $("#city").children("option").eq(0).attr("value");
                        getList(citycode,3,area);
                    }
                }
                
                // 拼接省
                var pr=function(data){
                    for (var i = 0; i <data.length; i++) {
                        var op = $("<option></option>").attr("value",data[i].code).append(data[i].name);
                        $("#province").append(op);
                    }
                            //默认北京市
                            getList('110000',2,city);
                            getList('110100',3,area);
                }
                // 刚开始调用函数
                getList(1,1,pr)
                
                //给省份信息设置选择事件
                $("#province").change(function() {
                    $("#city").children("option").remove();
                    $("#area").children("option").remove();
                    var pcode = $(this).val();
                    getList(pcode,2,city);
                });
                
                //给省份信息设置选择事件
                $("#city").change(function() {
                    $("#area").children("option").remove();
                    var citycode = $(this).val();
                    getList(citycode,3,area);
                });
              
            })
            
            
        </script>
        
        
        
    </body>
</html>

 

posted @ 2020-05-13 07:48  三线码工  阅读(241)  评论(0)  编辑  收藏  举报