PHPでajaxを使用して州の連携を実現する方法
- PHPzオリジナル
- 2023-03-29 10:11:18436ブラウズ
Web 開発では、地方との連携は非常に一般的な機能の 1 つです。たとえば、住所入力フォームでは、ユーザーはまず自分の州を選択し、次に選択した州の都市データに基づいて選択を行う必要があります。この機能の実現は主にフロントエンド技術とバックエンド技術の連携に依存します。この記事では、PHPとAJAX技術を利用して地方連携機能を実装する方法を紹介します。
- 準備作業
PHP と AJAX を使用して地方連携を実現する前に、いくつかの必要な作業を準備する必要があります。まず、都市データベースが必要です。このデータベースには、すべての州、市、郡のデータが含まれています。このデータベースには、MySQL、Oracle、MSSQL Server などを使用できます。この記事では、MySQL データベースを使用します。
さらに、HTML、CSS、JavaScript などのフロントエンド テクノロジも必要です。これらのテクノロジーは、高度にインタラクティブなユーザー インターフェイスを構築するのに役立ちます。このユーザー インターフェイスでは、ユーザーはドロップダウン メニューから自分の州と都市を選択できます。
- 都市データベースの構築
都市データベースを作成する前に、このデータベースのデータ構造を設計する必要があります。これには主に次のデータ テーブルが含まれます:
- 県テーブル (県): 県 ID および県名のフィールドが含まれます;
- 市テーブル (都市): 都市 ID、都市名、および都市テーブルが含まれます。州 ID フィールド;
- 郡テーブル (エリア): 郡 ID、郡名、都市 ID フィールドが含まれます。
次の SQL ステートメントを使用してテーブルを作成します:
--Province table
CREATE TABLE province (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
主キー (id)
) ENGINE=InnoDB デフォルトの文字セット=utf8 ;
-- 都市テーブル
CREATE TABLE city (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
province_id int(11) NOT NULL,
主キー (id),
KEY 州 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,
主キー (id),
キー city_id (city_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
都市データをこれら 3 つのテーブルにインポートすると、PHP コードの構築を開始できます。
- 地方連携コードの構築
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 テクノロジを使用する必要があります。フロントエンドで地方連携を実装する主な手順は次のとおりです:
- 2 つのドロップダウン メニューを定義します: 1 つは地方を選択するため、もう 1 つは都市を選択するためです;
- ユーザーが [州の後] を選択すると、バックエンド サーバーにリクエストを送信して、その州に対応する都市のリストを取得します。
- ユーザーが引き続き都市を選択できるように、都市のドロップダウン リストを更新します。市。
実装されている 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 中国語 Web サイトの他の関連記事を参照してください。