Comment utiliser ajax en php pour établir un lien provincial

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.

1. Préparation

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.

2. Créer une base de données de villes

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 :

• tableau de province (province) : comprenant les champs d'identifiant de province et de nom de province ;
• tableau de ville (ville) : comprenant les champs d'identifiant de ville, de nom de ville et d'identifiant de province ; ) ) : Contient les champs ID du comté, Nom du comté et ID de la ville.
• Utilisez l'instruction SQL suivante pour créer une table :

--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 TABLE city 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)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

• -- Table du comté
CREATE TABLE area (
• id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
• city_id

int(11) NON NULL, CLÉ PRIMAIRE (id), CLÉ city_id (city_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Importez les données de la ville dans ces trois tables et nous pouvons commencer à construire le code PHP.

Créer un code de liaison provincial

• Voici le processus d'implémentation du code PHP :

• Lorsque l'utilisateur sélectionne une province (via le menu déroulant), le code AJAX envoie l'identifiant de la province sélectionnée à l'arrière- serveur final ;

Une fois que le serveur principal a reçu l'identifiant de la province, il interroge la base de données et renvoie la liste des villes auxquelles appartient la province

Le code AJAX met à jour la liste des villes sur la page frontale afin que les utilisateurs pouvez continuer à sélectionner des villes.

4. En suivant le processus ci-dessus, nous pouvons écrire le code PHP suivant :

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);
?>

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="&#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>

🎜Une fois la page exécutée, les utilisateurs peuvent sélectionner leurs provinces et villes dans la liste déroulante. Lorsque l'utilisateur sélectionne une province, une requête AJAX est automatiquement envoyée pour obtenir la liste des villes ; lorsque l'utilisateur sélectionne une ville, une requête AJAX est automatiquement envoyée pour obtenir la liste des comtés. Tout se fait sans aucun saut de page et l'expérience utilisateur est très bonne. 🎜🎜À ce stade, nous avons mis en œuvre avec succès la fonction de liaison au niveau provincial entre PHP et AJAX. Dans le même temps, nous ressentons également l’étroite collaboration entre les technologies front-end et back-end pour offrir aux utilisateurs une meilleure expérience. 🎜

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!