php+vue.js 实现省市县乡的四级联动（ajax加载）

 

除了引入vue.js还需要引入vue的一个ajax库：vue-resource

html:

 

    
    
    






    

        
               {{pro.name}}
        

    
    

        
                {{ci.name}}
        
    
    

        
            {{cou.name}}
        
    
    

        
            {{to.name}}
        
    

 

getAddress.php

 

getMessage());
}

if(empty($_GET)){   //省
    $pro = $mypdo->query('select * from t_province');
    $pro = $pro->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($pro));

}elseif(isset($_GET['pro_id'])){   //市
    $cirySql = $mypdo->prepare('select * from t_city where province_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['pro_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}elseif(isset($_GET['city_id'])){      //县
    $cirySql = $mypdo->prepare('select * from t_county where city_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['city_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}elseif(isset($_GET['county_id'])){   //乡
    $cirySql = $mypdo->prepare('select * from t_town where county_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['county_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}else{
    exit();
}