In diesem Tutorial wird ausführlich erkl?rt, wie Sie mithilfe von JavaScript den ausgew?hlten Wert eines HTML-Dropdown-Menüs abrufen und die AJAX-Technologie verwenden, um den Wert an das PHP-Backend zu senden. Das PHP-Skript führt eine Datenbankabfrage basierend auf dem empfangenen Wert aus und gibt die Ergebnisse an das Frontend zurück, wodurch letztendlich eine dynamische Aktualisierung des zweiten Dropdown-Menüs erreicht wird, um ein interaktives Webformular zu erstellen.

Bei der Webentwicklung ist es h?ufig erforderlich, Seiteninhalte basierend auf Benutzerauswahlen dynamisch zu aktualisieren. Eines der h?ufigsten Szenarios ist das Dropdown-Menü ?Verknüpfung“. Wenn der Benutzer beispielsweise eine Option in einem Dropdown-Menü ausw?hlt, l?dt ein anderes Dropdown-Menü die entsprechenden Unteroptionen basierend auf der vorherigen Auswahl. In diesem Tutorial erfahren Sie, wie Sie mithilfe von JavaScript den ausgew?hlten Wert des Dropdown-Menüs abrufen, ihn zur Verarbeitung mithilfe der AJAX-Technologie an das PHP-Backend übergeben und schlie?lich das dynamische Laden von Daten erreichen.

Teil 1: Den ausgew?hlten Wert des Dropdown-Menüs in JavaScript abrufen

Zun?chst müssen wir sicherstellen, dass wir die Auswahl des Benutzers im ersten Dropdown-Menü über JavaScript auf der Clientseite (Browser) korrekt abrufen k?nnen.

Ursprüngliche Problemanalyse: Im bereitgestellten Codeausschnitt lautet der Versuch, den ausgew?hlten Wert abzurufen:

 document.getElementById('lblmess').innerHTML = (formid.listid[formid.listid.selectedIndex].value)
$element = document.getElementById("lblmess");
console.log($element.innerHTML)

Es gibt mehrere Probleme mit diesem Code:

1. Obwohl es m?glich ist, direkt über formid.listid[formid.listid.selectedIndex].value auf Formularelemente zuzugreifen, ist es eine pr?gnantere und empfehlenswertere M?glichkeit, das Ereignis onchange zu verwenden, um den Wert des aktuellen Elements zu übergeben.
2. Das Zuweisen eines Werts zum innerHTML von lblmess und das anschlie?ende Lesen aus lblmess fügt einen unn?tigen Zwischenschritt hinzu.
3. Das Wichtigste ist, dass $element eine JavaScript-Variable ist, die nicht direkt im PHP-Code verwendet werden kann, da PHP auf der Serverseite ausgeführt wird, w?hrend JavaScript auf der Clientseite ausgeführt wird. Die beiden Betriebsumgebungen sind unterschiedlich und Variablen k?nnen nicht direkt gemeinsam genutzt werden.

Optimierte JavaScript-Werterfassungsmethode: Ein pr?gnanterer, effizienterer und empfehlenswerterer Ansatz besteht darin, den Wert des aktuell ausgew?hlten Elements direkt als Parameter an die JavaScript-Funktion im onchange-Ereignis zu übergeben.

?nderung der HTML-Struktur: ?ndern Sie onchange="getdll()" in onchange="getdll(this.value)". this.value stellt den Wert der dar, die vom aktuellen -Element im onchange-Ereignis ausgew?hlt wurde.

Modifikation der JavaScript-Funktion: Die getdll-Funktion kann jetzt den ausgew?hlten Wert direkt empfangen.

 <skript>
    Funktion getdll(selectedValue) {
        // Zu diesem Zeitpunkt ist selectedValue der im ersten Dropdown-Menü ausgew?hlte Wert console.log("Der ausgew?hlte Wert ist: " selectedValue);
        // Der Wert kann in lblmess zum Debuggen oder für Benutzerfeedback angezeigt werden document.getElementById('lblmess').innerHTML = "Sie haben ausgew?hlt: " selectedValue;

        // Als n?chstes verwenden wir AJAX, um diesen Wert an den Server zu senden // ... (AJAX-Code wird im n?chsten Abschnitt detailliert beschrieben)
    }
</skript>

Teil 2: Die Natur der Client-Server-Interaktion verstehen

Bevor Sie sich mit AJAX befassen, ist es wichtig, die grundlegenden Unterschiede zwischen der Client-Seite (JavaScript im Browser) und der Server-Seite (PHP) zu verstehen.

• Client (JavaScript) : Wird im Browser des Benutzers ausgeführt und ist für die Handhabung der Benutzeroberfl?che, der Benutzerinteraktion und der Front-End-Logik verantwortlich. Es hat keinen direkten Zugriff auf das Dateisystem oder die Datenbank des Servers.
• Serverseitig (PHP) : Wird auf dem Webserver ausgeführt und ist für die Datenspeicherung, Datenbankoperationen, Gesch?ftslogik und die Generierung dynamischer Webinhalte verantwortlich. PHP wird beim Laden der Seite einmal ausgeführt, HTML generiert und an den Browser gesendet.

Daher k?nnen JavaScript-Variablen nicht direkt im PHP-Code verwendet werden und umgekehrt. Um den Datenaustausch zwischen beiden zu erreichen, sind HTTP-Anfragen erforderlich. AJAX (Asynchronous JavaScript and XML) ist die Schlüsseltechnologie, um diese Art der asynchronen Kommunikation zu erreichen.

Teil 3: Verwenden von AJAX zum Implementieren des dynamischen Datenladens

AJAX erm?glicht es JavaScript, HTTP-Anfragen an den Server zu senden und Antworten zu empfangen, ohne die gesamte Seite neu laden zu müssen. Dadurch k?nnen wir den ausgew?hlten Wert des ersten Dropdown-Menüs an das PHP-Skript senden. Nachdem das PHP-Skript die Datenbank abgefragt hat, gibt es die Ergebnisse an JavaScript zurück, das die Daten dann verwendet, um das zweite Dropdown-Menü dynamisch zu aktualisieren.

übersicht über die Funktionsweise von AJAX:

1. Ereignisausl?sung: Der Benutzer trifft im ersten Dropdown-Menü eine Auswahl und l?st dadurch die Funktion getdll(selectedValue) aus.
2. Eine Anfrage senden: Die getdll-Funktion verwendet die Fetch-API (oder XMLHttpRequest), um eine asynchrone HTTP-Anfrage an ein PHP-Skript auf dem Server zu senden und dabei den selectedValue als Parameter zu übergeben.
3. Serververarbeitung: Das PHP-Skript empf?ngt die Anfrage und den ausgew?hlten Wert. Es führt Datenbankabfragen unter Verwendung dieses Werts als Bedingung aus.
4. Antwort senden: Das PHP-Skript sendet die Abfrageergebnisse (normalerweise im JSON-Format) als HTTP-Antwort an den Client zurück.
5. Client-Verarbeitung: Die getdll-Funktion empf?ngt die Antwort von PHP. Es analysiert die JSON-Daten und iteriert dann durch die Daten, wobei das -Element des zweiten Dropdown-Menüs dynamisch erstellt und gefüllt wird.

Front-End-JavaScript (unter Verwendung der Fetch-API): Wir werden die getdll-Funktion so ?ndern, dass sie eine AJAX-Anfrage sendet.

 <skript>
    Funktion getdll(selectedValue) {
        document.getElementById('lblmess').innerHTML = "Sie haben ausgew?hlt: " selectedValue;
        const roomListSelect = document.getElementById('roomList');

        // L?schen Sie die vorhandenen Optionen des zweiten Dropdown-Menüs roomListSelect.innerHTML = '<option value="">Loading...</option>'; // Ladestatus vorübergehend anzeigen // Prüfen, ob der selectedValue gültig ist, z. B. nicht ?0“
        if (selectedValue === "0") {
            roomListSelect.innerHTML = '<option value="">Bitte w?hlen Sie einen gültigen Büroraum aus</option>';
            zurückkehren; //Anfrage nicht senden}

        // Verwenden Sie die Fetch-API, um eine POST-Anfrage an das PHP-Skript zu senden fetch('get_rooms.php', {
            Methode: 'POST', // oder 'GET', je nachdem, wie Ihr Backend Parameter-Header empf?ngt: {
                'Content-Type': 'application/x-www-form-urlencoded', // H?ufig verwendeter Content-Type
            },
            body: 'o_id=' selectedValue // Den ausgew?hlten Wert als POST-Parameter senden})
        .then(response => {
            if (!response.ok) {
                throw new Error('Netzwerkantwort ist abnormal');
            }
            return Response.json(); // JSON-Antwort analysieren})
        .then(data => {
            // Alle alten Optionen l?schen roomListSelect.innerHTML = '';

            if (Datenl?nge > 0) {
                // Durchlaufe die empfangenen Daten und erstelle für jedes Datenelement eine neue <option>
                data.forEach(room => {
                    const option = document.createElement('option');
                    option.value = room.id; // Angenommen, die Daten enthalten die Felder ?id“ und ?room_name“ option.textContent = room.room_name;
                    roomListSelect.appendChild(option);
                });
            } anders {
                roomListSelect.innerHTML = '</option>
<option value="">Kein Besprechungsraum verfügbar</option>';
            }
        })
        .catch(error => {
            console.error('Beim Abrufen der Konferenzraumdaten ist ein Fehler aufgetreten:', Fehler);
            roomListSelect.innerHTML = '<option value="">Laden fehlgeschlagen, bitte versuchen Sie es erneut</option>';
        });
    }
</skript>

Backend-PHP-Skript (Verarbeitung von AJAX-Anfragen): Erstellen Sie eine neue Datei mit dem Namen get_rooms.php, um vom Frontend gesendete AJAX-Anfragen zu verarbeiten.

 <?php // get_rooms.php

// Datenbankverbindungsdatei einführen // Angenommen, die Variable $ conn wurde über include ?db_conn.php“ mit der Datenbank verbunden; usw. // Beispiel:
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "Ihr_Datenbankname"; // Durch Ihren Datenbanknamen ersetzen $conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}

//Setzen Sie den Antwortheader auf JSON
header('Content-Type: application/json');

// Den o_id-Parameter in der POST-Anfrage abrufen $o_id = isset($_POST['o_id']) ? $_POST['o_id'] : '';

$rooms = []; // Array zum Speichern von Abfrageergebnissen if (!empty($o_id) && is_numeric($o_id)) {
    // Vorbereitete Anweisungen verwenden, um SQL-Injection zu verhindern $stmt = $conn->prepare("SELECT id, room_name FROM `assembly_hall` WHERE o_id = ? ORDER BY `room_name` ASC");
    $stmt->bind_param("i", $o_id); // ?i“ stellt einen Ganzzahltyp dar $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $rooms[] = $row;
        }
    }
    $stmt->close();
}

// Ergebnis in JSON kodieren und ausgeben echo json_encode($rooms);

$conn->close();
?>

Teil 4: Vollst?ndiger Beispielcode

Integrieren Sie das oben genannte HTML, JavaScript und PHP, um ein vollst?ndiges Beispiel für ein verknüpftes Dropdown-Menü zu erstellen.

index.php (Hauptseitendatei):

 <?php // Angenommen, dass hier die Datenbankverbindung $conn hergestellt wurde
// Beispiel-Verbindungscode (bitte entsprechend Ihrer tats?chlichen Situation ?ndern)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "Ihr_Datenbankname"; // Durch Ihren Datenbanknamen ersetzen $conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}
?>


<kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown-Menü ?Dynamische Verknüpfung“</title>
    <stil>
        .custom-select {
            Polsterung: 8px;
            Rand: 1px fest #ccc;
            Randradius: 4px;
            Rand unten: 10px;
        }
        #lblmes {
            Rand oben: 10px;
            Schriftst?rke: fett;
            Farbe: #333;
        }
    

<k>

    <h1>Büro und Konferenzraum ausw?hlen</h1>

    <form name="formid">
        <label for="officeSelect">W?hlen Sie ein Büro aus:</label>
        <select class="custom-select" name="listid" id="officeSelect" onchange="getdll(this.value)">
            <option value="0">-- Bitte w?hlen Sie das Büro aus--</option>
            <?php $hall_qry = $conn->query("SELECT o_id, office_name FROM `office_hall` WHERE o_id !=0 ORDER BY `office_name` ASC");
            while ($row = $hall_qry->fetch_assoc()) : ?>
                <option value="<?php echo $row['o_id'] ?>"><?php echo $row[&#39;office_name&#39;] ?></option>
            <?php endwhile; ?>
        </select>
        <br><br>

        <label for="roomList">Besprechungsraum ausw?hlen:</label>
        <select class="custom-select" id="roomList">
            <option value="">Bitte w?hlen Sie zuerst das Büro aus</option>
        </select>
        <br>
        <label id="lblmess"></label>
    </form>

    <skript>
        Funktion getdll(selectedValue) {
            document.getElementById('lblmess').innerHTML = "Sie haben die Büro-ID ausgew?hlt:" selectedValue;
            const roomListSelect = document.getElementById('roomList');

            // L?schen Sie die vorhandenen Optionen des zweiten Dropdown-Menüs und zeigen Sie den Ladestatus an roomListSelect.innerHTML = '<option value="">Loading...</option>';

            //Das zweite Dropdown-Menü zurücksetzen, wenn ein ungültiger Wert ausgew?hlt wird (z. B. die Option ?Bitte ausw?hlen“) if (selectedValue === ?0“ || selectedValue === ?“) {
                roomListSelect.innerHTML = '<option value="">Bitte w?hlen Sie einen gültigen Büroraum aus</option>';
                zurückkehren;
            }

            // Verwenden Sie die Fetch-API, um eine POST-Anfrage an das PHP-Skript zu senden fetch('get_rooms.php', {
                Methode: 'POST',
                überschriften: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                K?rper: 'o_id=' selectedValue
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Netzwerkantwort ist abnormal' Response.status);
                }
                return Response.json();
            })
            .then(data => {
                // Alle alten Optionen l?schen roomListSelect.innerHTML = '';

                if (Datenl?nge > 0) {
                    // Durchlaufe die empfangenen Daten und erstelle für jedes Datenelement eine neue <option>
                    data.forEach(room => {
                        const option = document.createElement('option');
                        option.value = room.id;
                        option.textContent = room.room_name;
                        roomListSelect.appendChild(option);
                    });
                } anders {
                    roomListSelect.innerHTML = '</option>
<option value="">Kein Besprechungsraum verfügbar</option>';
                }
            })
            .catch(error => {
                console.error('Beim Abrufen der Konferenzraumdaten ist ein Fehler aufgetreten:', Fehler);
                roomListSelect.innerHTML = '<option value="">Laden fehlgeschlagen, bitte versuchen Sie es erneut</option>';
            });
        }
    

    <?php $conn->close();
    ?>
</skript></k></stil></kopf>

Das obige ist der detaillierte Inhalt vonDynamisches Laden des Dropdown-Menüs: JavaScript ruft den ausgew?hlten Wert ab und interagiert mit dem PHP-Backend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!