PHP+Ajax+Mysql省市縣三級聯動
阿新 • • 發佈：2018-11-26
PHP+Ajax+Mysql省市縣三級聯動
前言
-
之前寫了個小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", '*****' <?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>