Maison > Article > développement back-end > Étapes de mise en œuvre de la liaison PHP à trois niveaux

Étapes de mise en œuvre de la liaison PHP à trois niveaux

王林original: 2023-05-24 15:45:37830parcourir

Étapes pour mettre en œuvre une liaison PHP à trois niveaux

Avec le développement d'Internet, le développement Web est devenu une partie importante de l'industrie informatique. En tant qu'outil important pour le développement Web, PHP dispose d'une gamme d'applications de plus en plus large. Dans le développement Web, les contrôles de formulaire de liaison à trois niveaux sont très utiles dans certaines occasions spéciales, telles que la sélection d'adresses provinciales et municipales, la marque, le modèle, la sélection de version, etc. Dans cet article, nous présenterons brièvement les étapes pour implémenter la liaison PHP à trois niveaux.

1. Qu'est-ce qu'un contrôle de liaison à trois niveaux ?

Un contrôle de liaison à trois niveaux fait référence à l'affichage d'une liste de sélection de liaisons sur la première page. Par exemple, lors de la sélection d'une région, sélectionnez d'abord une province, puis une ville. en fonction de la sélection de la province, et enfin sélectionnez ensuite le district ou le comté en fonction de la sélection de la ville. Ce contrôle de liaison à trois niveaux est très utile dans certaines occasions spéciales.

Technologies pour réaliser des liaisons de deuxième et troisième niveaux

Il existe de nombreuses technologies pour réaliser des liaisons de troisième niveau, les plus courantes incluent Ajax, jQuery, Vue.js, etc. Nous ne présentons pas ces technologies ici, mais introduisons une méthode d'implémentation PHP simple et facile à utiliser.

Trois étapes de mise en œuvre d'un lien à trois niveaux

Nous présentons maintenant brièvement les étapes pour réaliser un lien à trois niveaux.

1. Écrivez une page HTML

Nous devons d'abord écrire une page HTML contenant des listes déroulantes pour les provinces, les villes et les comtés. Comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <title>三级联动控件</title>
    <meta charset="UTF-8">
</head>
<body>
    <select id="province" name="province">
        <option value="0">请选择省份</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广东</option>
        <!-- 其他省份省略 -->
    </select>
    <br><br>
    
    <select id="city" name="city">
        <option value="0">请选择城市</option>
    </select>
    <br><br>

    <select id="district" name="district">
        <option value="0">请选择县区</option>
    </select>
    <br><br>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

2. Écrivez du code JavaScript

Ensuite, nous écrivons un fichier JavaScript pour gérer les événements de liaison à trois niveaux. Comme indiqué ci-dessous :

$(function(){
    // 省份下拉框改变事件
    $('#province').change(function(){
        var pid = $(this).val(); // 获取选中的省份id
        if(pid == 0){ // 如果省份id为0，则清空城市下拉框和县区下拉框
            $('#city').empty().append('<option value="0">请选择城市</option>');
            $('#district').empty().append('<option value="0">请选择县区</option>');
            return;
        }
        
        $.ajax({
            type: 'post',
            url: 'get_city.php', // 服务器处理程序，可根据需要修改
            data: {pid:pid},
            dataType: 'json',
            success: function(citys){
                $('#city').empty().append('<option value="0">请选择城市</option>');
                $('#district').empty().append('<option value="0">请选择县区</option>');
                $.each(citys, function(i, city){
                    $('#city').append('<option value="'+city.id+'">'+city.name+'</option>');
                });
            }
        });
    });
    
    // 城市下拉框改变事件
    $('#city').change(function(){
        var cid = $(this).val(); // 获取选中的城市id
        if(cid == 0){ // 如果城市id为0，则清空县区下拉框
            $('#district').empty().append('<option value="0">请选择县区</option>');
            return;
        }
        
        $.ajax({
            type: 'post',
            url: 'get_district.php', // 服务器处理程序，可根据需要修改
            data: {cid:cid},
            dataType: 'json',
            success: function(districts){
                $('#district').empty().append('<option value="0">请选择县区</option>');
                $.each(districts, function(i, district){
                    $('#district').append('<option value="'+district.id+'">'+district.name+'</option>');
                });
            }
        });
    });
});

3. Écrivez un gestionnaire côté serveur

Enfin, nous devons également écrire un gestionnaire côté serveur pour interroger les données de la ville et du comté. Comme indiqué ci-dessous :

get_city.php

<?php
header('Content-Type: application/json;charset=utf-8');
$pid = $_POST['pid'];
if(empty($pid)){
    echo json_encode([]);
    exit;
}

// 连接数据库查询城市数据
$conn = new mysqli('localhost', 'root', '123456', 'test');
if(mysqli_connect_errno()){
    echo json_encode([]);
    exit;
}

$conn->set_charset('utf8');
$sql = "select * from city where pid=".$pid;
$result = $conn->query($sql);
$citys = [];
while($row = $result->fetch_assoc()){
    $citys[] = $row;
}

echo json_encode($citys);
exit;
?>

get_district.php

<?php
header('Content-Type: application/json;charset=utf-8');
$cid = $_POST['cid'];
if(empty($cid)){
    echo json_encode([]);
    exit;
}

// 连接数据库查询县区数据
$conn = new mysqli('localhost', 'root', '123456', 'test');
if(mysqli_connect_errno()){
    echo json_encode([]);
    exit;
}

$conn->set_charset('utf8');
$sql = "select * from district where cid=".$cid;
$result = $conn->query($sql);
$districts = [];
while($row = $result->fetch_assoc()){
    $districts[] = $row;
}

echo json_encode($districts);
exit;
?>

IV Résumé

Dans cet article, nous avons présenté les étapes pour implémenter la liaison PHP à trois niveaux. En implémentant cette fonction, nous pouvons créer un sélecteur de liens à trois niveaux pour les zones urbaines, permettant aux utilisateurs de sélectionner des adresses plus facilement et plus rapidement. L'utilisation de la technologie PHP pour mettre en œuvre des contrôles de liaison à trois niveaux nécessite la coopération du front-end et du back-end implémente principalement les fonctions d'affichage des pages et de traitement des événements, tandis que le back-end est principalement responsable de l'interrogation de la base de données pour obtenir des données. La méthode présentée dans cet article n'est qu'une des méthodes de mise en œuvre, et les lecteurs peuvent l'améliorer et l'optimiser selon leurs besoins.

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!

php JavaScript jquery ajax vue.js html JS 事件选择器数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Convertir le format de fichier php au format XMLArticle suivant：Convertir le format de fichier php au format XML

Articles Liés

Voir plus