In diesem Tutorial erfahren Sie im Detail, wie Sie den ausgew?hlten Wert einer HTML-Dropdown-Liste in Front-End-JavaScript abrufen und wie Sie mithilfe der AJAX-Technologie diesen Wert an das Back-End-PHP-Skript senden, um abh?ngige Daten dynamisch zu laden (z. B. dynamisch eine Liste von Besprechungsr?umen basierend auf dem ausgew?hlten Büroraum anzuzeigen) und so eine interaktive Webanwendung zu erstellen.

Einführung: Allgemeine Anforderungen für dynamische Dropdown-Listen

Bei der Webentwicklung besteht h?ufig die Notwendigkeit, Seiteninhalte basierend auf Benutzerauswahlen dynamisch zu aktualisieren. Ein typisches Szenario sind kaskadierende Dropdown-Listen: Wenn der Benutzer eine Option in einer Dropdown-Liste ausw?hlt, ?ndert sich der Inhalt der anderen Dropdown-Liste entsprechend. Nachdem Sie beispielsweise ein ?Büro“ ausgew?hlt haben, werden in der zweiten Dropdown-Liste die ?Konferenzr?ume“ unter dem Büro angezeigt.

Um diese Interaktion zu erreichen, ist die Zusammenarbeit von Front-End-JavaScript und Back-End-PHP erforderlich. Ein h?ufiges Missverst?ndnis unter Anf?ngern besteht darin, den Wert einer JavaScript-Variablen direkt im PHP-Code zu verwenden. Allerdings ist PHP eine serverseitige Sprache und wird ausgeführt, bevor die Seite in den Browser geladen wird; JavaScript ist eine clientseitige Sprache und wird im Browser ausgeführt. Das bedeutet, dass der PHP-Code keine Aktionen ?erkennen“ kann, die der Benutzer über JavaScript im Browser ausführt, es sei denn, diese Aktionen leiten Daten über Netzwerkanforderungen (z. B. AJAX) an den Server zurück.

In diesem Artikel wird zun?chst erl?utert, wie Sie den ausgew?hlten Wert einer Dropdown-Liste in JavaScript effizient abrufen k?nnen. Anschlie?end wird erl?utert, wie dieser Wert mithilfe der AJAX-Technologie an das PHP-Backend übergeben wird, um ein wirklich dynamisches Laden von Daten zu erreichen.

Kern-JavaScript-Interaktion: Ausgew?hlten Wert abrufen

Das Abrufen des ausgew?hlten Werts der Dropdown-Liste ist der erste Schritt zur Erzielung einer dynamischen Interaktion. In HTML l?st das -Element normalerweise eine JavaScript-Funktion über das onchange-Ereignis als Reaktion auf die Auswahl des Benutzers aus.

Ereignisbehandlung optimieren: Ausgew?hlten Wert übergeben

Die ursprüngliche Methode kann den ausgew?hlten Wert über document.getElementById erhalten. Eine pr?zisere und effizientere M?glichkeit besteht jedoch darin, den Wert des aktuell ausgew?hlten Elements direkt als Parameter an die JavaScript-Funktion im onchange-Ereignis zu übergeben.

 <select class="custom-select" name="listid" onchange="getdll(this.value)">
    <option value="0"></option>
    <?php // PHP-Code zum Laden der ersten Dropdown-Listenoptionen aus der Datenbank $hall_qry = $conn->query("SELECT * 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>

Im obigen Code zeigt this.value auf den Wertattributwert des aktuell ausgew?hlten -Elements und wird als Parameterwert an die getdll-Funktion übergeben.

Implementierung von JavaScript-Funktionen: Empfangen und Verarbeiten

Nach Erhalt des ausgew?hlten Werts kann die JavaScript-Funktion eine entsprechende Verarbeitung durchführen, z. B. ein Anzeigeelement auf der Seite aktualisieren oder die übermittlung an das Backend vorbereiten.

 <skript>
    Funktion getdll(val) {
        // Eine Anzeigebezeichnung für Debugging oder Benutzerfeedback aktualisieren document.getElementById('lblmess').innerHTML = "Sie haben eine ID ausgew?hlt: " val;
        console.log("Der ausgew?hlte Wert ist: ", val);

        // Als n?chstes verwenden wir diesen Wert, um Daten vom Backend anzufordern // ... (der AJAX-Anfrageteil wird im n?chsten Abschnitt vorgestellt)
    }
</skript>

Auf diese Weise kann die Funktion getdll(val) direkt die o_id der vom Benutzer ausgew?hlten office_hall abrufen.

Implementierung des dynamischen Datenladens: AJAX und PHP

Es reicht nicht aus, den Wert nur im Vorfeld zu ermitteln. Damit die zweite Dropdown-Liste (z. B. ?Konferenzraum“) basierend auf der Auswahl der ersten Dropdown-Liste (?Büro“) dynamisch aktualisiert werden kann, müssen wir diesen ausgew?hlten Wert an den Server senden, PHP die Datenbank basierend auf diesem Wert abfragen lassen und neue Daten zurückgeben. Dieser Prozess wird normalerweise durch die AJAX-Technologie (Asynchronous JavaScript and XML) implementiert.

Verstehen Sie die Client-Server-Interaktion

Auch hier wird der PHP-Code einmalig auf dem Server ausgeführt, generiert HTML und sendet es an den Browser. JavaScript wird im Browser ausgeführt und kann auf Benutzerinteraktionen reagieren. Damit PHP die Abfrage erneut ausführen kann, nachdem der Benutzer sie ausgew?hlt hat, muss über JavaScript eine neue HTTP-Anfrage an den Server initiiert werden.

Einführung von AJAX: der Schlüssel zum Aktualisieren der Seite ohne Aktualisierung

AJAX erm?glicht es Webseiten, Daten mit dem Server auszutauschen und einen Teil des Seiteninhalts zu aktualisieren, ohne die gesamte Seite neu laden zu müssen. In der modernen Webentwicklung ist die Fetch-API die empfohlene Methode zum Initiieren von AJAX-Anfragen.

AJAX-Anfrageprozess

1. JavaScript sendet eine Anfrage: Wenn die Funktion getdll(val) aufgerufen wird, verwendet sie die Fetch-API, um eine HTTP-Anfrage an ein bestimmtes PHP-Backend-Skript zu senden und fügt val als Daten in die Anfrage ein.
2. PHP empf?ngt die Anfrage und verarbeitet sie: Das Backend-PHP-Skript empf?ngt die Anfrage, extrahiert den Val-Wert aus der Anfrage und verwendet diesen Wert dann, um die Datenbankabfrage auszuführen.
3. PHP gibt Daten zurück: Ein PHP-Skript sendet die Abfrageergebnisse (normalerweise als JSON formatiert) als Antwort an den Browser zurück.
4. JavaScript empf?ngt und aktualisiert die Seite: JavaScript empf?ngt die JSON-Antwort, analysiert die Daten und aktualisiert dann dynamisch die Optionen der zweiten Dropdown-Liste.

Codebeispiel: Dynamisches AJAX-Laden

Um ein dynamisches Laden zu erreichen, müssen wir die HTML-Struktur und die JavaScript-Funktionen ?ndern und ein neues PHP-Backend-Skript erstellen.

1. HTML-Struktur

2. JavaScript-Code (Verbesserung der getdll-Funktion)

Diese Funktion initiiert eine AJAX-Anfrage an das Backend.

 <skript>
    Funktion getdll(selectedOfficeId) {
        document.getElementById('lblmess').innerHTML = "Konferenzraum wird geladen...";
        console.log("Ausgew?hlte Office-ID: ", selectedOfficeId);

        // Wenn das Standardelement ausgew?hlt ist (z. B. 0), die Konferenzraumliste l?schen if (selectedOfficeId === "0") {
            const roomList = document.getElementById('roomList');
            roomList.innerHTML = '<option value="0">-- Bitte w?hlen Sie zuerst das Büro aus--</option>';
            document.getElementById('lblmess').innerHTML = "";
            zurückkehren;
        }

        // Verwenden Sie die Fetch-API, um eine POST-Anfrage an das Backend-PHP-Skript zu senden fetch('get_rooms.php', { // 'get_rooms.php' ist die Backend-Skriptdatei, die die Anfragemethode verarbeitet: 'POST',
            überschriften: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'office_id=' selectedOfficeId //Den ausgew?hlten Wert als Anforderungstext senden})
        .then(response => {
            if (!response.ok) {
                throw new Error('Netzwerkantwort ist abnormal');
            }
            return Response.json(); // Antwort im JSON-Format analysieren})
        .then(data => {
            const roomList = document.getElementById('roomList');
            roomList.innerHTML = ''; // Vorhandene Optionen l?schen, wenn (data.length > 0) {
                //Standardoption hinzufügen const defaultOption = document.createElement('option');
                defaultOption.value = "0";
                defaultOption.textContent = "-- Bitte w?hlen Sie einen Konferenzraum aus--";
                roomList.appendChild(defaultOption);

                // Durchlaufe die Daten und füge neue Optionen hinzu data.forEach(room => {
                    const option = document.createElement('option');
                    option.value = room.id; // Angenommen, die vom Backend zurückgegebenen Daten haben ID- und Namensfelder option.textContent = room.room_name;
                    roomList.appendChild(option);
                });
                document.getElementById('lblmess').innerHTML = "Der Konferenzraum ist geladen.";
            } anders {
                const noOption = document.createElement('option');
                noOption.value = "0";
                noOption.textContent = "--Kein Besprechungsraum verfügbar--";
                roomList.appendChild(noOption);
                document.getElementById('lblmess').innerHTML = "Kein relevanter Konferenzraum gefunden.";
            }
        })
        .catch(error => {
            console.error('Beim Abrufen der Konferenzraumdaten ist ein Fehler aufgetreten:', Fehler);
            document.getElementById('lblmess').innerHTML = "Konferenzraum konnte nicht geladen werden.";
        });
    }
</skript>

3. PHP-Backend-Skript (get_rooms.php)

Erstellen Sie die Datei get_rooms.php im selben Verzeichnis wie die HTML-Datei.

 <?php // get_rooms.php

// Datenbankverbindungsdatei einführen require_once &#39;db_connection.php&#39;; // Angenommen, Ihr Datenbankverbindungscode befindet sich in diesem Dateiheader(&#39;Content-Type: application/json&#39;); // Dem Browser mitteilen, dass die Antwort im JSON-Format vorliegt // Prüfen, ob die POST-Anfrage und der Parameter office_id empfangen werden if (isset($_POST[&#39;office_id&#39;])) {
    $officeId = $_POST[&#39;office_id&#39;];

    // 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", $officeId); // ?i“ bedeutet, dass $officeId eine Ganzzahl ist $stmt->execute();
    $result = $stmt->get_result();

    $rooms = [];
    while ($row = $result->fetch_assoc()) {
        $rooms[] = $row;
    }

    echo json_encode($rooms); // Das Ergebnis in JSON kodieren und ausgeben $stmt->close();
} anders {
    // Wenn keine gültige office_id empfangen wird, ein leeres Array oder eine Fehlermeldung zurückgeben echo json_encode([]);
}

$conn->close();
?>

db_connection.php Beispiel:

 <?php //db_connection.php
$servername = "localhost";
$username = "Ihr_Benutzername";
$password = "Ihr_Passwort";
$dbname = "your_database";

// Verbindung erstellen $conn = new mysqli($servername, $username, $password, $dbname);

// Verbindung prüfen if ($conn->connect_error) {
    die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}
//Zeichensatz festlegen $conn->set_charset("utf8");
?>

Zu beachtende Dinge und Best Practices

1. Sicherheit: SQL-Injection-Schutz Verwenden Sie im PHP-Backend immer vorbereitete Anweisungen (Prepared Statements), um Benutzereingaben zu verarbeiten, wie im Beispiel $stmt = $conn->prepare(...). Das direkte Zusammenfügen von Benutzereingaben in eine SQL-Abfragezeichenfolge ist ?u?erst gef?hrlich und anf?llig für SQL-Injection-Angriffe.

2. Benutzererfahrung: Ladestatus und Fehlerbehandlung

   • W?hrend einer AJAX-Anfrage k?nnen Sie den Benutzer darüber informieren, dass Daten geladen werden, indem Sie das lblmess-Tag aktualisieren oder eine Ladeanimation anzeigen.
   • Behandeln Sie Netzwerkfehler oder vom Server zurückgegebene nicht erfolgreiche Status in JavaScript-Catch-Bl?cken, um Benutzern benutzerfreundliche Fehleraufforderungen bereitzustellen.

3. Kodex-Organisation: Trennung von Belangen

   • Platzieren Sie HTML-, JavaScript- und PHP-Code in eigenen Dateien (oder halten Sie sie zumindest logisch getrennt).
   • JavaScript-Code sollte in <script>-Tags oder in externen .js-Dateien platziert werden.</script>
   • Die PHP-Backend-Logik sollte in einer separaten .php-Datei platziert werden, die für die Verarbeitung von AJAX-Anfragen vorgesehen ist.

4. Modernes JavaScript: Fetch-API Die Fetch-API ist die standardm??ige und empfohlene Methode zum Initiieren von Netzwerkanfragen in modernen Browsern. Es bietet eine einfachere und leistungsf?higere Schnittstelle und ersetzt das herk?mmliche XMLHttpRequest.

5. Datenformat: JSON (JavaScript Object Notation) ist das am h?ufigsten verwendete Format beim Datenaustausch zwischen Front-End und Back-End. Die Funktion json_encode() von PHP kann ein PHP-Array oder -Objekt in einen JSON-String konvertieren, w?hrend die Methode Response.json() von JavaScript eine JSON-Antwort in ein JavaScript-Objekt analysieren kann.

Zusammenfassen

Durch dieses Tutorial haben wir gelernt, wie man den ausgew?hlten Wert einer HTML-Dropdown-Liste effektiv in JavaScript erh?lt, und haben den Interaktionsmechanismus zwischen clientseitigem JavaScript und serverseitigem PHP verstanden. Der Schlüssel besteht darin, die AJAX-Technologie (insbesondere die Fetch-API) zu verwenden, um die Benutzerauswahl im Front-End an das Back-End-PHP-Skript zu senden, das die Datenbankabfrage verarbeitet und die Daten zurückgibt, und schlie?lich JavaScript verwendet, um den Seiteninhalt dynamisch zu aktualisieren. Indem Sie Best Practices für Sicherheit, Benutzererfahrung und Code-Organisation befolgen, k?nnen Sie dynamische Webanwendungen erstellen, die robust und benutzerfreundlich sind.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie einen in der Dropdown-Liste ausgew?hlten Wert in JavaScript und wenden ihn auf eine PHP-Abfrage an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!