웹 개발에서 지방 연계는 매우 흔한 기능 중 하나입니다. 예를 들어 주소 작성 양식에서 사용자는 먼저 해당 지역을 선택한 다음 선택한 지역의 도시 데이터를 기반으로 선택해야 합니다. 이 기능의 실현은 주로 프론트엔드 기술과 백엔드 기술 간의 협력에 달려 있습니다. 이 기사에서는 PHP와 AJAX 기술을 사용하여 지방 연계 기능을 구현하는 방법을 소개합니다.
PHP와 AJAX를 사용하여 지방 연계를 이루기 전에 필요한 작업을 준비해야 합니다. 먼저 도시 데이터베이스가 필요합니다. 이 데이터베이스에는 모든 성, 시, 군에 대한 데이터가 포함되어 있습니다. 이 데이터베이스는 MySQL, Oracle, MSSQL Server 등이 될 수 있습니다. 이 기사에서는 MySQL 데이터베이스를 사용합니다.
또한 HTML, CSS, Javascript와 같은 일부 프런트엔드 기술도 필요합니다. 이러한 기술은 고도의 대화형 사용자 인터페이스를 구축하는 데 도움이 될 수 있습니다. 이 사용자 인터페이스에서 사용자는 드롭다운 메뉴를 통해 지방과 도시를 선택할 수 있습니다.
도시 데이터베이스를 생성하기 전에 이 데이터베이스의 데이터 구조를 설계해야 합니다. 여기에는 주로 다음 데이터 테이블이 포함됩니다.
다음 SQL 문을 사용하여 테이블을 만듭니다.
--Province table
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,
이름 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, PRIMARY KEY (id),
city_id (city_id)백엔드 서버는 지방 ID를 수신한 후 데이터베이스를 쿼리하고 해당 지방이 속한 도시 목록을 반환합니다.
위 프로세스에 따라 다음 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);
?>여기서 mysqli를 사용하여 데이터베이스, 사용 위 코드의 "localhost", "root" 및 "password"를 해당 호스트 이름, 사용자 이름 및 비밀번호로 바꿔야 합니다. 동시에 해당 데이터베이스에 대한 데이터베이스 이름도 테스트해야 합니다.
🎜🎜프런트엔드 인터페이스 구축🎜🎜🎜프론트엔드 인터페이스 구축에서는 주로 HTML, CSS, Javascript 기술을 사용해야 합니다. 다음은 프런트 엔드에서 지방 연결을 구현하는 주요 단계입니다. 🎜🎜🎜두 개의 드롭다운 메뉴를 정의합니다. 하나는 지방을 선택하고 다른 하나는 도시를 선택하기 위한 것입니다. 🎜🎜사용자가 지방을 선택하면 요청을 보냅니다. 백엔드 서버로 해당 지역에 해당하는 도시 목록을 가져옵니다. 🎜🎜사용자가 계속해서 도시를 선택할 수 있도록 도시 드롭다운 목록을 업데이트하세요. 🎜🎜🎜다음은 구현된 HTML 및 Javascript 코드입니다. 🎜<!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>위 내용은 지방 연결을 달성하기 위해 PHP에서 Ajax를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
