之前写了个小demo, 用PHP+Ajax实现一个简单的二级城市联动, 传送门。之前用它来练手一下使用Ajax和PHP进行互动,所以数据就简单的以数组的形式存放在PHP文件中,但实际投入生产使用的项目肯定会将数据存放在数据库当中。因此也就有了现在的这个demo,与之前的不同在于,我将数据(包含了全国的省市县)存放在数据库中,使用Ajax向PHP发起数据请求,然后通过PHP动态地从数据库取得对应的数据并将其返回给前端,完整的实现了从前端到后台,再从后台到前端的省市县三级联动
这里先大致说明一下最后实现的效果
- 页面初始化的过程中,就会向后端发起请求,从数据库拿到省份的数据,并将其注入到对应的省份选择框中,在选择具体的省份之前,市县两个选择框是没有数据的,选择省份后,才会再向后台发起请求,取得该省份下所有市的数据,同理,县也需要在选择具体的市后才会向后台发起请求,拿到对应县的数据
实现原理
- 实现这个demo主要用到的技术有:jQuery、Ajax、PHP、MySql,其中最主要的就是包括了两层互动,使用Ajax和PHP进行互动,以及使用PHP和数据库进行互动(其实这里也不算互动,只是使用PHP从数据库取得数据,并没有插入数据)
- 注:这里涉及在数据库中插入数据,需要执行一个.sql文件,所有的代码文件以及依赖文件我都已经上传了,传送门
- 学了一天习,太累了,偷懒一下了,没有在代码中写注释 (:逃… 不过!要是有什么问题欢迎在评论里提出来!随时随地帮你解决~~~
代码实现
- conn.inc.php以及mysqli.php文件,这两个文件实现和数据库建立连接
<?php
/**
* Created by PhpStorm.
* User: jiangnan
* Date: 2018/10/10
* Time: 18:06
*/
define("HOST", 'localhost');
define("USER", 'root');
define("PWD", '*****'); //密码,自行更换
define("DBNAME", 'php');
<?php
/**
* Created by PhpStorm.
* User: jiangnan
* Date: 2018/10/10
* Time: 18:07
*/
include 'conn.inc.php';
$mysqli = new mysqli(HOST, USER, PWD, DBNAME);
if ($mysqli -> connect_errno){
die('数据库链接发生错误!'.$mysqli -> connect_error);
}
//PHP+Ajax+Mysql省市县三级联动
- region_action.php文件,处理来自前端的请求,从数据库拿到对应的数据,并返回给前端
<?php
/**
* Created by PhpStorm.
* User: jiangnan
* Date: 2018/10/10
* Time: 18:07
*/
header("Content-Type:text/html;charset=utf-8");
include 'mysqli.php';
$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";
if ($type == "" || $parent_id ==""){
exit(json_encode(array("flag" => false, "msg" => "查询类型错误!")));
}else{
//关于数据库操作
$sql = "select * from global_region where parent_id=$parent_id and region_type=$type";
$result = $mysqli -> query($sql);
if($result -> num_rows > 0){
$arr = [];
while($row = $result -> fetch_assoc()){
//
$arr[$row["region_id"]]['region_id']=$row["region_id"];//$arr[1]["title"]=$row["title"]
$arr[$row["region_id"]]['region_name']=$row["region_name"];//$arr[1]["content"]=$arr["content"]
}
}
$provinces_json = json_encode($arr);
exit($provinces_json);
}
?>
- region.html文件,里面主要就是用jQuery实现的逻辑,通过Ajax和后端进行数据交换,还有就是少量的页面结构和样式,不难看懂
<!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>
<script>
$(document).ready(function() {
$.ajax({
type: "get",
url: "region_action.php",
data: {"parent_id": "1", "type": "1"},
dataType: "json",
success: function (data) {
$("#provinces").html("<option value=''>请选择省份</option>");
$.each(data, function (index, item) {
//alert(item.region_name);
$("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
}
});
$("#provinces").change(function () {
$.ajax({
type: "get",
url: "region_action.php",
data: {"parent_id": $(this).val(), "type": "2"},
success: function (data) {
$("#cities").html("<option value=''>请选择市</option>>");
//???
$.each($.parseJSON(data), function (index, item) {
$("#cities").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
}
});
});
$("#cities").change(function () {
$.ajax({
type: "get",
url: "region_action.php",
data: {"parent_id": $(this).val(), "type": "3"},
success: function (data) {
$("#countries").html("<option value=''>请选择县</option>>");
$.each($.parseJSON(data), function (index, item) {
$("#countries").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
});
}
});
});
$("#countries").change(function () {
var value = $("#provinces").find("option:selected").text() + $("#cities").find("option:selected").text() + $("#countries").find("option:selected").text();
//console.log(value);
$("#region").append("你选择的地址是:" + "<input value='" + value + "'>");
});
});
</script>
</head>
<body>
<h1 align="center">PHP+Ajax+Mysql省市县三级联动</h1>
<table align="center" border="1" cellpadding="3" cellspacing="0" width="30%">
<tr bgcolor="#87ceeb">
<th>省份</th>
<th>市</th>
<th>县</th>
</tr>
<tr style="height: 100px">
<th>
<select name="" id="provinces">
<option value="">请选择省份</option>
</select>
</th>
<th>
<select name="" id="cities">
<option value="">请选择市</option>
</select>
</th>
<th>
<select name="" id="countries">
<option value="">请选择县</option>
</select>
</th>
</tr>
</table>
<h4>
<div align="center" id="region"></div>
</h4>
</body>
</html>