In der Webentwicklung ist die Provinzverknüpfung eine der häufigsten Funktionen. Beispielsweise müssen Benutzer in einem Formular zum Ausfüllen einer Adresse zunächst ihre Provinz auswählen und dann eine Auswahl basierend auf den Stadtdaten der ausgewählten Provinz treffen. Die Realisierung dieser Funktion beruht hauptsächlich auf der Zusammenarbeit zwischen Front-End-Technologie und Back-End-Technologie. In diesem Artikel stellen wir vor, wie Sie mithilfe der PHP- und AJAX-Technologie provinzielle Verknüpfungsfunktionen implementieren.
Bevor wir PHP und AJAX verwenden, um eine Provinzverknüpfung zu erreichen, müssen wir einige notwendige Arbeiten vorbereiten. Zunächst benötigen wir eine Stadtdatenbank. Diese Datenbank enthält Daten für alle Provinzen, Städte und Kreise. Diese Datenbank kann MySQL, Oracle, MSSQL Server usw. sein. In diesem Artikel verwenden wir die MySQL-Datenbank.
Darüber hinaus benötigen wir auch einige Frontend-Technologien wie HTML, CSS und Javascript. Diese Technologien können uns dabei helfen, hochgradig interaktive Benutzeroberflächen zu erstellen. In dieser Benutzeroberfläche können Benutzer ihre Provinz und Stadt über Dropdown-Menüs auswählen.
Bevor wir eine Stadtdatenbank erstellen, müssen wir die Datenstruktur dieser Datenbank entwerfen. Es enthält hauptsächlich die folgenden Datentabellen:
Verwenden Sie die folgende SQL-Anweisung, um eine Tabelle zu erstellen:
--Province-Tabelle
CREATE TABLE province (province (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 城市表
CREATE TABLE city (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
province_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY province_id (province_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 县区表
CREATE TABLE area (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
city_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY city_id (city_id id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
id)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
city code> (
id int(11) NOT NULL AUTO_INCREMENT,name varchar(50) NOT NULL, province_id int(11 ) NOT NULL,
id),province_id (province_id)area (id int(11) NOT NULL AUTO_INCREMENT,name varchar(50) NOT NULL, PRIMÄRSCHLÜSSEL (id),
city_id (city_id)Nachdem der Back-End-Server die Provinz-ID erhalten hat, fragt er die Datenbank ab und gibt die Liste der Städte zurück, zu denen die Provinz gehört.
Nach dem obigen Prozess können wir den folgenden PHP-Code schreiben:
<?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);
?>Hier verwenden wir MySQL mit dem verbinden Datenbank, verwenden Sie müssen „localhost“, „root“ und „password“ im obigen Code durch den entsprechenden Hostnamen, Benutzernamen und Passwort ersetzen. Gleichzeitig müssen wir auch den Datenbanknamen in die entsprechende Datenbank testen.
🎜🎜Erstellen der Front-End-Schnittstelle🎜🎜🎜Beim Erstellen der Front-End-Schnittstelle müssen wir hauptsächlich HTML-, CSS- und Javascript-Technologien verwenden. Im Folgenden sind die wichtigsten Schritte zum Implementieren der Provinzverknüpfung im Frontend aufgeführt: 🎜🎜🎜 Definieren Sie zwei Dropdown-Menüs: eines zum Auswählen einer Provinz und das andere zum Auswählen einer Stadt. 🎜🎜Nachdem der Benutzer eine Provinz ausgewählt hat, senden Sie eine Anfrage zum Back-End-Server Rufen Sie die Liste der Städte ab, die der Provinz entsprechen. 🎜🎜Aktualisieren Sie die Städte-Dropdown-Liste, damit Benutzer weiterhin Städte auswählen können. 🎜🎜🎜Das Folgende ist der implementierte HTML- und Javascript-Code: 🎜<!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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax in PHP, um eine Provinzverknüpfung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
