Verwenden Sie effizient JSON-Daten, um kaskadierende Dropdown-Menüs in Laravel Blade-Vorlagen zu implementieren

In diesem Artikel wird beschrieben, wie eine lokale JSON -Datei in einer Laravel -Anwendung geladen und ihre Daten an eine Blade -Vorlage übergeben werden. Durch die Verarbeitung von JSON-Parsen durch den Controller verwendet die View-Ebene die @Forach-Anweisung von Blades, um die Daten zu durchqueren und so die dynamische Erzeugung von Dropdown-Menüs zu erreichen. Insbesondere untersucht der Artikel auch eingehend, wie JavaScript zum Implementieren von Drop-Down-Menüfunktionen für mehrstufige Verknüpfungen kombiniert wird, um den Benutzern dynamische Inhaltsanzeige basierend auf der Auswahl bereitzustellen, und bietet praktische Code-Beispiele und Vorsichtsmaßnahmen für die Implementierung solcher Interaktionen.

In der modernen Entwicklung von Webanwendungen ist häufig Daten aus Nichtdaten-Quellen wie lokalen JSON-Dateien geladen und Benutzer vorgestellt, insbesondere beim Erstellen dynamischer Formulare oder Datenauswahl. Das Laravel -Framework bietet einen kurzen Mechanismus, um solche Anforderungen zu erfüllen. In diesem Artikel werden Sie über die Integration von JSON-Daten in Laravel Blade-Ansichten und die weitere Implementierung der Dropdown-Menüs mit mehrstufiger Verknüpfung führen.

1. Laden und Parsen von JSON -Daten

Zunächst müssen Sie die JSON -Datei im Laravel -Controller lesen und analysieren. Dies geschieht normalerweise auf eine Weise, die das Sicht auf das Rendieren handelt.

  Php

Namespace App \ http \ Controller;

Verwenden Sie Illuminate \ http \ request;

Klasse UserController erweitert den Controller
{
    /**
     * Zeigt eine Ansicht an, um ein Benutzerformular zu erstellen.
     *
     * @Return \ Illuminate \ View \ View
     */
    öffentliche Funktion create ()
    {
        // Erstellen Sie den vollständigen Pfad der JSON -Datei // Die Funktion Base_path () gibt den absoluten Pfad des Projektroot -Verzeichnisses $ JSONFILEPATH = BASE_PATH zurück ('Ressourcen/Daten/Adress.json');

        // Überprüfen Sie, ob die Datei vorliegt, um Fehler zu vermeiden, wenn (! Datei_Exists ($ jsonFilepath)) {
            // Fehler umgehen, die in der Datei nicht gemäß der tatsächlichen Situation vorhanden sind, z. B. eine Ausnahme oder die Rückgabe einer Fehlermeldung zurückzugeben ()-> Witherrors ('JSON-Datendatei existiert nicht!');
        }

        // Lesen Sie den Inhalt der JSON -Datei $ JSONSTRING = file_get_contents ($ jsonFilepath);

        // Die JSON -Zeichenfolge in ein PHP -Array dekodieren // Der zweite Parameter true bedeutet das JSON -Objekt in ein assoziatives Array anstelle des Objekts $ details = json_decode ($ jonstring, true);

        // Überprüfen Sie, ob die Dekodierung erfolgreich ist, wenn (json_last_error ()! == JSON_ERROR_NONE) {
            // JSON-Parsing-Fehler zurückgeben ()-> WitchErrors ('JSON-Daten Parsing fehlgeschlagen:'. JSON_LAST_ERROR_MSG ());
        }

        // die an die Ansicht zurückgefrorenen Ansicht übergeben ('user.create')-> mit ('Details', $ Details);
    }
}

veranschaulichen:

• Base_path ('Ressourcen/Daten/Adresse.json'): Der Absolute -Pfad, mit dem die JSON -Datei abgerufen wurde. Es wird empfohlen, solche statischen Datendateien in das Ressourcenverzeichnis für eine einfache Verwaltung zu platzieren.
• Datei_get_Contents (): Lesen Sie die gesamte Datei in einer Zeichenfolge.
• JSON_DECODE ($ JSONSONDRING, TRUE): Dekodieren Sie die JSON -Zeichenfolge in eine PHP -Variable. Das Übergeben eines echten Parameters wandelt das JSON -Objekt in ein assoziatives Array um, was beim Zugriff auf Daten über Schlüsselnamen in der Blade -Vorlage bequemer ist.
• Fehlerbehandlung: Fügte Datei -Existenzüberprüfung und JSON -Dekodierungsfehlerüberprüfung hinzu, die in Produktionsumgebungen erforderlich sind.

2. Zeigen Sie Daten in der Blade-Vorlage an (grundlegendes Dropdown-Menü)

In der Blattansicht können Sie die @Foreach -Schleife verwenden, um über das vom Controller übergebene Array zu iterieren und das HTML -TAG zu generieren.

Nehmen wir an, Ihre address.json -Dateistruktur lautet wie folgt:

 [
 {
   "Region": "Territorium der Naypyitaw Union",
   "Stadt": "Za Bu thi ri Township",
   "Viertel": "Zay ya theik di Quarter",
   "Postcode": 1501001
},
 {
   "Region": "Territorium der Naypyitaw Union",
   "Stadt": "Za Bu thi ri Township",
   "Viertel": "Pyin Nyar Theik di Quarter",
   "Postcode": 1501002
}
]

In der Datei user/create.blade.php können Sie das Dropdown-Menü der Region wie folgt anzeigen:

 <label f> Region: </label>
<select name="Region" id="Region" class="Form-Control">
    <option value=""> Bitte wählen Sie den Bereich </option>
    {{{-Verwenden Sie Array_unique, um sicherzustellen, dass sich der Bereich nicht wiederholt-}}
    @foreach ($ details-> einzigartig ('Region') als $ detail)
       <option value="{{$ detail ['Region']}}"> {{$ detail ['Region']}} </option>
    @endforach
</select>

veranschaulichen:

• $ details ist das gesamte JSON -Datenarray, das vom Controller übergeben wurde.
• $ details-> einzigartig ('Region'): Um im Dropdown-Menü doppelte Regionoptionen zu vermeiden, können wir die eindeutige () -Methode der Laravel-Sammlung in Blade verwenden. Dies erfordert, dass die Variable von $ details eine Laravel-Sammlung ist (kann im Controller über Collect ($ details) oder direkt in Blade mit Collect ($ details)-> eindeutig ('Region') konvertiert werden. Wenn $ Details nur ein normales PHP -Array sind, müssen Sie die Deduplizierung im Controller oder die manuelle Deduplizierung in Blade verarbeiten.
• $ detail ['Region']: Da JSON_DECODE den wahren Parameter verwendet, ist $ detail ein assoziatives Array, auf sein Schlüssel wird über Square Brackets [] zugegriffen.

3. Implementieren Sie die Dropdown-Menüs der Kaskadierung (JavaScript-Interaktion)

Um die Kaskadierungsfunktion "Wenn der Benutzer ein bestimmtes Gebiet auswählt, werden nur die Townships unter diesem Gebiet angezeigt", müssen wir JavaScript kombinieren. Ein allgemeiner Ansatz besteht darin, alle Daten gleichzeitig an das vordere Ende zu übergeben und dann den Client über JavaScript zu filtern.

3.1 Bereiten Sie Front-End-Daten vor

Damit JavaScript auf $ -Detail -Daten zugreifen kann, müssen wir sie in ein in JavaScript verfügbarer Format konvertieren, in der Regel eine JSON -Zeichenfolge, und in das <script> -Tag eingebettet.</script>

 
<script>
    // das PHP -Array in einen JSON -String konvertieren und der JavaScript -Variablen const Alldetails = @json ($ details) zuweisen; 
    // oder verwenden Sie json.parse (&#39;{!! json_encode ($ details) !!}&#39;); Wenn strengere Flucht erforderlich ist </script>

<label f> Region: </label>
<select name="Region" id="Region" class="Form-Control">
    <option value=""> Bitte wählen Sie den Bereich </option>
    @foreach (sammeln ($ details)-> einzigartig ('Region') als Detail)
       <option value="{{$ detail ['Region']}}"> {{$ detail ['Region']}} </option>
    @endforach
</select>

<label f class="MT-3"> Township: </label>
<select name="Stadt" id="Stadt" class="Form-Control" deaktiviert>
    <option value=""> Bitte wählen Sie eine Gemeinde </option>
</select>

<label f class="mt-3"> block: </label>
<select name="viertel" id="viertel" class="form-control" deaktiviert>
    <option value=""> Bitte wählen Sie einen Block </option>
</select>

<label f class="mt-3"> Postcode: </label>
<eingabe type="text" name="postal_code" id="postal_code" class="Form-kontroll" readonly>
</eingabe>

3.2 JavaScript -Logik schreiben

Jetzt werden wir JavaScript-Code hinzufügen, um Änderungen in der Auswahl der Bereiche zu hören und die Gemeinde zu aktualisieren und die Dropdown-Menüs dynamisch zu blockieren.

 <script>
    // Stellen Sie sicher, dass document.adDeVentListener (&#39;DomContentled&#39;, function () {
        const RegionSelect = document.getElementById (&#39;Region&#39;);
        const TownSelect = document.getElementById (&#39;Stadt&#39;);
        const viertelSelect = document.getElementById (&#39;Quarter&#39;);
        const postalcodeInput = document.getElementById (&#39;postal_code&#39;);

        // Dropdown-Menüfunktion in der Stadt und blockieren resettownandquarter () {
            TownSelect.innerHtml = &#39;<Option Value = ""> Bitte wählen Sie Gemeindes &#39;;
            TownSelect.Disabled = True;
            viertelselect.innerHtml = &#39;<Option value = ""> Bitte wählen Sie einen Block &#39;;
            Viertelselekt.DIENDED = TRUE;
            postalcodeInput.Value = &#39;&#39;; // die Postleitzahl löschen}

        ResettownandQuarter (); // Regionen ausführen.
            const selectedregion = this.Value;
            ResettownandQuarter (); // Zurücksetzen if (selectedRegion) {
                // Filter von Township -Daten, die den ausgewählten Flächen entsprechen, filteredtowns = alldetails.filter (item => item [&#39;Region&#39;] === Selected Region);

                // Holen Sie sich die Liste der Städte, die nicht dupliziert sind. // Beachten Sie, dass &#39;Town&#39; Räume hat // Füllen
                    const option = document.createelement (&#39;option&#39;);
                    Option.Value = Stadt;
                    Option.TextContent = Town;
                    TownSelect.AppendChild (Option);
                });
                TownSelect.Disabled = false; // Dropdown-Menü der Gemeinde aktivieren}}
        });

        TownSelect.AddeVentListener (&#39;Change&#39;, function () {
            const SelectedRegion = Regionenauswahl.Value;
            Const Selectedtown = this.Value;
            viertelselekt.innernhtml = &#39;<Option Value = ""> Bitte wählen Sie Block &#39;; // Block Viertel zurücksetzen.
            postalcodeInput.Value = &#39;&#39;; // die Postleitzahl löschen if (selectedregion && selectedtown) {
                // Blockdaten herausfiltern, die dem ausgewählten Gebiet und der Gemeinde const filtrteredQuarters = alldetails.filter (item => entsprechen 
                    item [&#39;Region&#39;] === Selectedregion && item [&#39;Town&#39;] === Selectedtown
                );

                // Erhalten Sie die Liste der nicht-duplikatorischen Blöcke const UniqueQuarters = [... neuer Set (filteredQuarters.map (item => item [&#39;viertel&#39;])]; // beachten
                    const option = document.createelement (&#39;option&#39;);
                    Option.Value = Viertel;
                    Option.TextContent = Quarter;
                    Viertelelekt.AppendChild (Option);
                });
                Viertelselekt.DIENDED = FALSE; // das Dropdown-Menü Block aktivieren}}
        });

        Viertelelekt.AdDeVentListener (&#39;Change&#39;, function () {
            const SelectedRegion = Regionenauswahl.Value;
            Const Selectedtown = TownSelect.Value;
            const selectedQuarter = this.value;
            postalcodeInput.Value = &#39;&#39;; // Die Postleitzahl löschen if (SelectedRegion && Selectedtown && SelectedQualter) {
                // Ermitteln Sie den entsprechenden Postcode const matchedDetail = alldetails.find (item => 
                    item [&#39;Region&#39;] === Selectedregion && 
                    Item [&#39;Stadt&#39;] === Selectedtown && 
                    Item [&#39;Quarter&#39;] === SelectedQuarter
                );

                if (MatchedDetail) {
                    postalcodeInput.Value = MatchedDetail [&#39;Postcode&#39;];
                }
            }
        });
    });
</script>

veranschaulichen:

• @json ($ details): Dies ist eine bequeme Richtlinie für Laravel Blade, die PHP -Variablen automatisch sicher in JSON -Zeichenfolgen umwandelt und HTML -Entitäten codiert, die direkt in JavaScript verwendet werden können.
• document.adDeVentListener ('DomContentled', ...): Stellen Sie sicher, dass der JavaScript -Code ausgeführt wird, nachdem das HTML -Dokument vollständig geladen und analysiert wurde.
• filter () und map (): gemeinsame Methoden für JavaScript -Arrays, die zum Filtern und Transformieren von Daten verwendet werden.
• [... New Set (...)]: Eine prägnante JavaScript -Syntax zum Extrahieren einzigartiger Elemente aus einem Array.
• Deaktivierte Eigenschaft: Deaktivieren Sie nachfolgende Dropdown-Menüs, bevor der Benutzer eine gültige Auswahl trifft.
• Beachten Sie den Schlüsselnamen: Am Ende der Stadt und der Viertelschlüsselnamen in Ihren JSON -Daten befinden sich Leerzeichen. Achten Sie darauf, diese Räume bei der Zugriffe in JavaScript, z. B. Element ['Town'] zu bewältigen. In der tatsächlichen Entwicklung wird empfohlen, die Schlüsselnamen standardisiert zu halten und Räume zu vermeiden.

3.3 Überlegungen großer Datensätze

Wenn Ihre JSON -Datei sehr groß ist, kann das Laden aller Daten in die Frontend gleichzeitig zu Leistungsproblemen führen. In diesem Fall ist ein besserer Ansatz:

1. Erstes Laden: Laden Sie nur Daten aus dem ersten Dropdown-Menü (z. B. "Bereich"), wenn die Seite geladen wird.
2. AJAX -Anforderung: Wenn ein Benutzer eine Region auswählt, wird eine AJAX -Anforderung über JavaScript an das Backend gesendet (z. B. unter Verwendung der Fetch -API oder Axios), wobei der ausgewählte Bereich als Parameter verwendet wird.
3. Backend -Filterung: Nachdem der Backend Controller die Anfrage erhalten hat, filtert er die entsprechenden Gemeindedaten aus der JSON -Datei gemäß den Parametern und gibt sie im JSON -Format zurück.
4. Front-End-Update: Nachdem JavaScript die vom Back-End zurückgegebenen Daten empfangen hat, füllt das Dropdown-Menü der Gemeinde dynamisch.
5. Wiederholen: Wiederholen Sie diesen Vorgang für nachfolgende Blöcke usw. Dropdown-Menüs.

Diese Methode kann die auf der Anfangsseite geladene Datenmenge reduzieren und die Benutzererfahrung verbessern.

Zusammenfassen

In den oben genannten Schritten haben Sie gelernt, wie Sie lokale JSON -Dateien in Ihrer Laravel -Anwendung laden und analysieren und ihre Daten dynamisch in Ihrer Blade -Vorlage anzeigen. Unabhängig davon, ob es sich um ein einfaches Dropdown-Menü oder ein komplexer Kaskadenwähler, kombiniert mit Laravels Back-End-Verarbeitungsleistung und Front-End-JavaScript-Interaktivität, können Sie leistungsstarke und benutzerfreundliche Formen erstellen. Berücksichtigen Sie in tatsächlichen Projekten unbedingt die Datengröße und wählen Sie die am besten geeignete Lade- und Interaktionsstrategie.

Das obige ist der detaillierte Inhalt vonVerwenden Sie effizient JSON-Daten, um kaskadierende Dropdown-Menüs in Laravel Blade-Vorlagen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!