Dans le développement Web, le lien provincial est l'une des fonctions les plus courantes. Par exemple, dans un formulaire de remplissage d'adresse, les utilisateurs doivent d'abord sélectionner leur province, puis effectuer une sélection basée sur les données de la ville de la province sélectionnée. La réalisation de cette fonction repose principalement sur la collaboration entre la technologie front-end et la technologie back-end. Dans cet article, nous présenterons comment utiliser les technologies PHP et AJAX pour mettre en œuvre des fonctions de liaison provinciales.
Avant d'utiliser PHP et AJAX pour établir des liens provinciaux, nous devons préparer certains travaux nécessaires. Premièrement, nous avons besoin d’une base de données sur la ville. Cette base de données contient des données pour toutes les provinces, villes et comtés. Cette base de données peut être MySQL, Oracle, MSSQL Server, etc. Dans cet article, nous utilisons la base de données MySQL.
De plus, nous avons également besoin de certaines technologies frontales, telles que HTML, CSS et Javascript. Ces technologies peuvent nous aider à créer des interfaces utilisateur hautement interactives. Dans cette interface utilisateur, les utilisateurs peuvent sélectionner leur province et leur ville via des menus déroulants.
Avant de créer une base de données de villes, nous devons concevoir la structure des données de cette base de données. Il contient principalement les tableaux de données suivants :
--Table de province
CREATE TABLE
province ( id int(11) NOT NULL AUTO_INCREMENT,
nom varchar(50) NOT NULL,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 PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- City table
CREATE TABLEcity code> (<ol start="3"> <code>id int(11) NON NULL AUTO_INCREMENT,name varchar(50) NON NULL,province_id int(11 ) NON NULL, CLÉ PRIMAIRE (id), CLÉ province_id (province_id)
area (id int(11) NOT NULL AUTO_INCREMENT,name varchar(50) NOT NULL,id), CLÉ city_id (city_id)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
<?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);
?>Ici, nous utilisons mysqli pour nous connecter au base de données, utilisez Vous devez remplacer "localhost", "root" et "password" dans le code ci-dessus par le nom d'hôte, le nom d'utilisateur et le mot de passe correspondants. Dans le même temps, nous devons également tester le nom de la base de données dans la base de données correspondante.
Construire l'interface front-end🎜🎜🎜Dans la construction de l'interface front-end, nous devons principalement utiliser les technologies HTML, CSS et Javascript. Voici les principales étapes pour mettre en œuvre le lien provincial dès le début : 🎜🎜🎜 Définissez deux menus déroulants : un pour sélectionner une province et l'autre pour sélectionner une ville 🎜🎜Une fois que l'utilisateur a sélectionné une province, envoyez une demande ; au serveur back-end Obtenez la liste des villes correspondant à la province 🎜🎜Mettez à jour la liste déroulante des villes afin que les utilisateurs puissent continuer à sélectionner les villes. 🎜🎜🎜Voici le code HTML et Javascript implémenté : 🎜<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelle est la différence entre JD International auto-exploité et JD auto-opéré
Touche de raccourci de veille
Que dois-je faire si mon lecteur C devient rouge ?
Introduction à l'utilisation de la boîte de message
qu'est-ce que Hadoop
Comment fonctionne le capteur de température
Qu'est-ce que l'indice Baidu
Téléphone portable projecteur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
