So verwenden Sie Ajax in PHP, um eine Provinzverknüpfung zu erreichen

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.

1. Vorbereitung

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.

2. Aufbau einer Stadtdatenbank

Bevor wir eine Stadtdatenbank erstellen, müssen wir die Datenstruktur dieser Datenbank entwerfen. Es enthält hauptsächlich die folgenden Datentabellen:

• Provinztabelle (Provinz): enthält Provinz-ID- und Provinznamensfelder;
• Stadttabelle (Stadt): enthält Stadt-ID-, Stadtnamen- und Provinz-ID-Felder;
• Kreistabelle (Bereich). ) ): Enthält die Felder Kreis-ID, Kreisname und Stadt-ID.

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,

PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- City table
3. 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;
• -- Kreistabelle
CREATE TABLE area (
• id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,

city_id int(11) NOT NULL,

PRIMÄRSCHLÜSSEL (id),

SCHLÜSSEL city_id (city_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;
• Importieren Sie Stadtdaten in diese drei Tabellen, und wir können mit der Erstellung von PHP-Code beginnen.

• Provinziellen Verknüpfungscode erstellen

Das Folgende ist der Prozess der PHP-Code-Implementierung:

Wenn der Benutzer eine Provinz auswählt (über das Dropdown-Menü), sendet der AJAX-Code die ausgewählte Provinz-ID an die Rückseite. Endserver;

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.

4. Der AJAX-Code aktualisiert die Städteliste auf der Front-End-Seite kann weiterhin Städte auswählen.

Nach dem obigen Prozess können wir den folgenden PHP-Code schreiben:

• 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[&#39;provinceId&#39;];
$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[&#39;cityId&#39;];
$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="&#39; + item.id + &#39;">' + 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="&#39; + item.id + &#39;">' + 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="&#39; + item.id + &#39;">' + item.name + '</option>');
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>

🎜Nachdem die Seite ausgeführt wurde, können Benutzer ihre Provinzen und Städte über die Dropdown-Liste auswählen. Wenn der Benutzer eine Provinz auswählt, wird automatisch eine AJAX-Anfrage gesendet, um die Städteliste abzurufen. Wenn der Benutzer eine Stadt auswählt, wird automatisch eine AJAX-Anfrage gesendet, um die Kreisliste abzurufen. Alles läuft ohne Seitensprünge ab und die Benutzererfahrung ist sehr gut. 🎜🎜Zu diesem Zeitpunkt haben wir die Funktion der Verknüpfung auf Provinzebene zwischen PHP und AJAX erfolgreich implementiert. Gleichzeitig spüren wir auch die enge Zusammenarbeit zwischen Front-End- und Back-End-Technologien, um den Benutzern ein besseres Erlebnis zu bieten. 🎜

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!