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

（注：需要SQL的朋友请在评论区留下email）除了引入vue.js还需要引入vue的一个ajax库：vue-resourcehtml:[html]view plaincopy>html>headlang="en">metacharset="UTF-8">metaname="viewport"content="w

php【菜鸟】

2601人浏览 · 2017-06-13 10:49:02

php【菜鸟】 · 2017-06-13 10:49:02 发布

（注：需要SQL的朋友请在评论区留下email）

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

html:

[html] view plain copy

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
</head>
<script src="../vue.js"></script>
<script src="../vue-resource.min.js"></script>
<style>
select{
height: 2em;
width: 12em;
text-align: center;
}
</style>
<body>
<div id="address" style="overflow: scroll;border: 1px solid #000000;height: 15em;text-align: center">
<p>
<select name="province" v-on:change="getAddress($event)">
<option v-for="pro in province" v-bind:value="pro.id" >{{pro.name}}</option>
</select>
</p>
<p>
<select name="city" v-on:change="getAddress($event)" >
<option v-for="ci in city" v-bind:value="ci.id" >{{ci.name}}</option>
</select>
</p>
<p>
<select name="county" v-on:change="getAddress($event)" >
<option v-for="cou in county" v-bind:value="cou.id" >{{cou.name}}</option>
</select>
</p>
<p>
<select name="town" >
<option v-for="to in town" v-bind:value="to.id" >{{to.name}}</option>
</select>
</p>
</div>
<script>
//后台传来的初始值
window.onload = function(){
address.$http.get('getAddress.php').then(function(response){
address.province = address.province.concat(response.data);
});
};
var address = new Vue({
el:"#address",
data: {
province: [{"id":0,"name":'———所在省———'}],
city:[{"id":0,"name":'———所在市———'}],
county:[{"id":0,"name":'———所在区县———'}],
town:[{"id":0,"name":'———所在镇乡———'}]
},
methods: {
getAddress: function (enevt) {
var DOMobj = enevt.currentTarget;
//获取当前改变项
var thisName = DOMobj.getAttribute("NAME");
var data= {};
var id = DOMobj.value;
switch (thisName){
case 'province':
this.city = [{"id": 0, "name": '———所在市———'}];
this.county = [{"id": 0, "name": '———所在区县———'}];
this.town = [{"id": 0, "name": '———所在镇乡———'}];
data={'pro_id':id};
break;
case 'city':
this.county = [{"id": 0, "name": '———所在区县———'}];
this.town = [{"id": 0, "name": '———所在镇乡———'}];
data={'city_id':id};
break;
case 'county':
this.town = [{"id": 0, "name": '———所在乡———'}];
data={'county_id':id};
break;
}
var pro_id = DOMobj.value;
if (pro_id != 0) {
address.$http.get('getAddress.php', data).then(function (response) {
if(response.data.length>0){
switch (thisName){
case 'province':address.city = address.city.concat(response.data);break;
case 'city':address.county = address.county.concat(response.data);break;
case 'county':address.town = address.town.concat(response.data);break;
}
}
});
}
}
}
});
</script>
</body>
</html>

getAddress.PHP

[html] view plain copy

<?php
$dsn = 'mysql:dbname=zyytest;host=127.0.0.1';
$user = 'root';
$pwd ='root';
try{
$mypdo = new PDO($dsn,$user,$pwd);
}catch (PDOException $e){
throw new Exception($e->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();
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^