웹 개발에서 지방 연계는 매우 흔한 기능 중 하나입니다. 예를 들어 주소 작성 양식에서 사용자는 먼저 해당 지역을 선택한 다음 선택한 지역의 도시 데이터를 기반으로 선택해야 합니다. 이 기능의 실현은 주로 프론트엔드 기술과 백엔드 기술 간의 협력에 달려 있습니다. 이 기사에서는 PHP와 AJAX 기술을 사용하여 지방 연계 기능을 구현하는 방법을 소개합니다.
- 준비
PHP와 AJAX를 사용하여 지방 연계를 이루기 전에 필요한 작업을 준비해야 합니다. 먼저 도시 데이터베이스가 필요합니다. 이 데이터베이스에는 모든 성, 시, 군에 대한 데이터가 포함되어 있습니다. 이 데이터베이스는 MySQL, Oracle, MSSQL Server 등이 될 수 있습니다. 이 기사에서는 MySQL 데이터베이스를 사용합니다.
또한 HTML, CSS, Javascript와 같은 일부 프런트엔드 기술도 필요합니다. 이러한 기술은 고도의 대화형 사용자 인터페이스를 구축하는 데 도움이 될 수 있습니다. 이 사용자 인터페이스에서 사용자는 드롭다운 메뉴를 통해 지방과 도시를 선택할 수 있습니다.
- 도시 데이터베이스 구축
도시 데이터베이스를 생성하기 전에 이 데이터베이스의 데이터 구조를 설계해야 합니다. 여기에는 주로 다음 데이터 테이블이 포함됩니다.
- 지방 테이블(지방): 지방 ID 및 지방 이름 필드 포함
- city 테이블(도시): 도시 ID, 도시 이름 및 지방 ID 필드 포함
- 카운티 테이블(지역) ) ): 카운티 ID, 카운티 이름 및 도시 ID 필드를 포함합니다.
다음 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,
PRIMARY KEY (
id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 도시 테이블- CREATE TABLE
city code> (
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)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;- 도시 데이터를 이 세 테이블로 가져오면 PHP 코드 작성을 시작할 수 있습니다.
사용자가 드롭다운 메뉴를 통해 주를 선택하면 AJAX 코드는 선택한 주 ID를 백-
백엔드 서버는 지방 ID를 수신한 후 데이터베이스를 쿼리하고 해당 지방이 속한 도시 목록을 반환합니다.
- AJAX 코드는 사용자가 도시 목록을 프런트엔드 페이지에 업데이트합니다. 계속해서 도시를 선택할 수 있습니다.
위 프로세스에 따라 다음 PHP 코드를 작성할 수 있습니다.
- 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);
?>로그인 후 복사
- city.php
<?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);
?>로그인 후 복사
area.php
<?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>로그인 후 복사
🎜페이지가 실행된 후 사용자는 드롭다운 목록을 통해 자신의 지방과 도시를 선택할 수 있습니다. 사용자가 지방을 선택하면 도시 목록을 얻기 위해 AJAX 요청이 자동으로 전송됩니다. 사용자가 도시를 선택하면 카운티 목록을 얻기 위해 AJAX 요청이 자동으로 전송됩니다. 페이지 이동 없이 모든 것이 완료되었으며 사용자 경험도 매우 좋습니다. 🎜🎜이 시점에서 우리는 PHP와 AJAX 간의 지방 수준 연결 기능을 성공적으로 구현했습니다. 동시에 우리는 사용자에게 더 나은 경험을 제공하기 위해 프런트엔드와 백엔드 기술 간의 긴밀한 협력을 느낍니다. 🎜
위 내용은 지방 연결을 달성하기 위해 PHP에서 Ajax를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
