Dalam pembangunan web, hubungan wilayah adalah salah satu fungsi yang sangat biasa. Contohnya, dalam borang pengisian alamat, pengguna perlu memilih wilayah mereka dahulu, dan kemudian membuat pilihan berdasarkan data bandar wilayah yang dipilih. Realisasi fungsi ini bergantung terutamanya pada kerjasama antara teknologi hadapan dan teknologi belakang. Dalam artikel ini, kami akan memperkenalkan cara menggunakan teknologi PHP dan AJAX untuk melaksanakan fungsi hubungan wilayah.
Sebelum menggunakan PHP dan AJAX untuk mencapai hubungan wilayah, kami perlu menyediakan beberapa kerja yang diperlukan. Pertama, kita memerlukan pangkalan data bandar. Pangkalan data ini mengandungi data untuk semua wilayah, bandar dan daerah. Pangkalan data ini boleh menjadi MySQL, Oracle, MSSQL Server, dll. Dalam artikel ini, kami menggunakan pangkalan data MySQL.
Selain itu, kami juga memerlukan beberapa teknologi bahagian hadapan, seperti HTML, CSS dan Javascript. Teknologi ini boleh membantu kami membina antara muka pengguna yang sangat interaktif. Dalam antara muka pengguna ini, pengguna boleh memilih wilayah dan bandar mereka melalui menu lungsur.
Sebelum mencipta pangkalan data bandar, kita perlu mereka bentuk struktur data pangkalan data ini. Ia terutamanya mengandungi jadual data berikut:
--Jadual provinsi
BUAT JADUAL (
province int(11) BUKAN NULL AUTO_INNCREMENT,
id varchar(50) BUKAN NULL,
KUNCI UTAMA (name)
) ENJIN=CHARSET LALAI InnoDB=utf8;id
-- Meja bandar (
int(11) BUKAN NULL AUTO_INCREMENT,city
varchar(50) BUKAN NULL,id
int(11) BUKAN NULL,name KEY (
),province_id KEY
(id)
) ENGINE=CARSET LAALA InnoDB=utf8;province_idprovince_id-- Jadual daerah
BUAT JADUAL
int(11) BUKAN NULL AUTO_INCREMENT,area
varchar(50) BUKAN NULL,id
int(11) BUKAN NULL,name KUNCI UTAMA (
) , city_id KEY
(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;city_idcity_idSelepas mengimport data bandar ke dalam tiga jadual ini, kita boleh mula membina kod PHP.
Bina kod pautan wilayah
Apabila pengguna memilih wilayah (melalui kaedah menu lungsur), kod AJAX menghantar id wilayah yang dipilih ke pelayan bahagian belakang
province.php
<?php
// 获取所有省份信息
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM province ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$provinceArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($provinceArray, $row);
}
mysqli_close($conn);
// 输出省份信息
echo json_encode($provinceArray, JSON_UNESCAPED_UNICODE);
?><?php
// 获取所选省份对应的城市信息
$provinceId = $_GET['provinceId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM city WHERE province_id=$provinceId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$cityArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($cityArray, $row);
}
mysqli_close($conn);
// 输出城市信息
echo json_encode($cityArray, JSON_UNESCAPED_UNICODE);
?><?php
// 获取所选城市对应的县区信息
$cityId = $_GET['cityId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM area WHERE city_id=$cityId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$areaArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($areaArray, $row);
}
mysqli_close($conn);
// 输出县区信息
echo json_encode($areaArray, JSON_UNESCAPED_UNICODE);
?>Membina antara muka bahagian hadapan
Tentukan dua menu lungsur: satu untuk memilih wilayah dan satu lagi untuk memilih bandar
Selepas halaman dijalankan, pengguna boleh memilih wilayah dan bandar mereka melalui senarai juntai bawah. Apabila pengguna memilih wilayah, permintaan AJAX dihantar secara automatik untuk mendapatkan senarai bandar apabila pengguna memilih bandar, permintaan AJAX dihantar secara automatik untuk mendapatkan senarai daerah. Semuanya selesai tanpa sebarang lompatan halaman, dan pengalaman pengguna sangat baik.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省级联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="provinceSelect">
<option value="">请选择省份</option>
</select>
<select id="citySelect">
<option value="">请选择城市</option>
</select>
<select id="areaSelect">
<option value="">请选择县区</option>
</select>
<script>
$(document).ready(function () {
// 页面加载时获取所有省份信息
$.ajax({
url: 'province.php',
type: 'GET',
dataType: 'json',
success: function (data) {
// 循环添加省份列表
$.each(data, function (i, item) {
$('#provinceSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
// 当用户选择省份时获取该省份对应的城市信息
$('#provinceSelect').change(function () {
// 获取所选省份的id
var provinceId = $(this).val();
// 清空城市列表和县区列表
$('#citySelect').empty().append('<option value="">请选择城市</option>');
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择省份，则不处理
if (provinceId === '') {
return false;
}
// 发送AJAX请求获取所选省份对应的城市列表
$.ajax({
url: 'city.php',
type: 'GET',
dataType: 'json',
data: { provinceId: provinceId },
success: function (data) {
// 循环添加城市列表
$.each(data, function (i, item) {
$('#citySelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
// 当用户选择城市时获取该城市对应的县区信息
$('#citySelect').change(function () {
// 获取所选城市的id
var cityId = $(this).val();
// 清空县区列表
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择城市，则不处理
if (cityId === '') {
return false;
}
// 发送AJAX请求获取所选城市对应的县区列表
$.ajax({
url: 'area.php',
type: 'GET',
dataType: 'json',
data: { cityId: cityId },
success: function (data) {
// 循环添加县区列表
$.each(data, function (i, item) {
$('#areaSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
});
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menggunakan ajax dalam php untuk mencapai hubungan wilayah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
