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!