Menggunakan data JSON dengan cekap untuk melaksanakan menu drop-down cascading dalam templat bilah laravel

Artikel ini memperincikan bagaimana untuk memuatkan fail JSON tempatan dalam aplikasi Laravel dan lulus datanya ke templat bilah. Dengan memproses parsing JSON oleh pengawal, lapisan paparan menggunakan arahan @foreach Blade untuk melintasi data, dengan itu mencapai menu drop-down yang dinamik. Khususnya, artikel ini juga meneroka cara yang mendalam bagaimana untuk menggabungkan JavaScript untuk melaksanakan fungsi menu drop-down pelbagai peringkat untuk menyediakan pengguna dengan paparan kandungan dinamik berdasarkan pemilihan, dan menyediakan contoh kod praktikal dan langkah berjaga-jaga untuk melaksanakan interaksi tersebut.

Dalam pembangunan aplikasi web moden, sering diperlukan untuk memuatkan data dari sumber bukan data seperti fail JSON tempatan dan membentangkannya kepada pengguna, terutama ketika membina bentuk dinamik atau pemilih data. Rangka kerja Laravel menyediakan mekanisme ringkas untuk menangani keperluan tersebut. Artikel ini akan membimbing anda tentang cara mengintegrasikan data JSON ke dalam pandangan bilah Laravel dan selanjutnya melaksanakan menu drop-down berkait pelbagai peringkat.

1. Memuatkan dan menghuraikan data JSON

Pertama, anda perlu membaca dan menghuraikan fail JSON dalam pengawal Laravel. Ini biasanya dilakukan dengan cara yang mengendalikan rendering pandangan.

  Php

App Namespace \ http \ controllers;

Gunakan Illuminate \ http \ request;

Kelas UserController memanjangkan pengawal
{
    /**
     * Memaparkan pandangan untuk membuat borang pengguna.
     *
     * @return \ Illuminate \ view \ view
     */
    Fungsi Awam Buat ()
    {
        // Membina laluan penuh fail json // fungsi base_path () mengembalikan laluan mutlak direktori root projek $ jsonfilePath = base_path ('sumber/data/alamat.json');

        // periksa jika fail wujud untuk mengelakkan kesilapan jika (! File_exists ($ jsonfilePath)) {
            // Mengendalikan kesilapan yang tidak wujud dalam fail mengikut keadaan sebenar, seperti membuang pengecualian atau mengembalikan mesej ralat kembali ()-> withErrors ('fail data json tidak wujud!');
        }

        // Baca kandungan fail json $ jsonstring = file_get_contents ($ jsonfilePath);

        // Decode rentetan json ke dalam array php // parameter kedua benar bermakna menyahkod objek json ke dalam array bersekutu, dan bukannya objek $ butiran = json_decode ($ jsonstring, true);

        // Periksa sama ada penyahkodan berjaya jika (json_last_error ()! == json_error_none) {
            // Mengendalikan kesilapan parsing JSON kembali ()-> WithErrors ('JSON Data Parsing gagal:'. JSON_LAST_ERROR_MSG ());
        }

        // lulus data yang dihuraikan ke paparan pulangan paparan ('users.create')-> dengan ('butiran', $ butiran);
    }
}

menggambarkan:

• base_path ('sumber/data/alamat.json'): Laluan mutlak yang digunakan untuk mendapatkan fail JSON. Adalah disyorkan untuk meletakkan fail data statik dalam direktori sumber untuk pengurusan mudah.
• file_get_contents (): Baca keseluruhan fail ke rentetan.
• JSON_DECODE ($ JSONSTRING, BENAR): Decode rentetan JSON ke dalam pembolehubah PHP. Melewati parameter yang benar menukarkan objek JSON ke dalam array bersekutu, yang lebih mudah apabila mengakses data melalui nama utama dalam templat bilah.
• Pengendalian ralat: Menambah pemeriksaan kewujudan fail dan pemeriksaan ralat penyahkodan JSON, yang merupakan bahagian yang diperlukan dari kod yang mantap dalam persekitaran pengeluaran.

2. Paparan data dalam templat bilah (menu drop-down asas)

Dalam paparan bilah, anda boleh menggunakan gelung @foreach untuk berulang di atas array yang diluluskan oleh pengawal dan menjana tag HTML .

Katakan struktur fail alamat.json anda adalah seperti berikut:

 [
 {
   "Wilayah": "Wilayah Kesatuan Naypyitaw",
   "Town": "Za Bu Thi Ri Township",
   "Suku": "Zay Ya Theik Di Quarter",
   "Kod Pos": 1501001
},
 {
   "Wilayah": "Wilayah Kesatuan Naypyitaw",
   "Town": "Za Bu Thi Ri Township",
   "Suku": "Pyin Nyar Theik Di Quarter",
   "Kod Pos": 1501002
}
]

Dalam fail pengguna/create.blade.php, anda boleh memaparkan menu lungsur rantau seperti ini:

 <label untuk="rantau"> rantau: </label>
<pilih name="rantau" id="rantau" class="form-control">
    <opsyen nilai=""> Sila pilih kawasan 
    {{-Gunakan array_unique untuk memastikan kawasan itu tidak diulang-}}
    @Foreach ($ butiran-> unik ('rantau') sebagai detail $)
       <option value="{{$ detail ['region']}}"> {{$ detail ['region']}} </option>
    @endforeach
</opsyen></pilih>

menggambarkan:

• Butiran $ adalah keseluruhan data JSON yang diluluskan dari pengawal.
• $ Butiran-> Unik ('Wilayah'): Untuk mengelakkan pilihan rantau duplikat dalam menu lungsur, kita boleh menggunakan kaedah unik () koleksi Laravel dalam bilah. Ini memerlukan pembolehubah Butiran $ adalah koleksi Laravel (boleh ditukar dalam pengawal melalui Collect ($ butiran) atau secara langsung dalam bilah menggunakan Collect ($ Butiran)-> Unik ('Wilayah')). Jika butiran $ hanyalah array PHP biasa, anda perlu mengendalikan deduplikasi dalam pengawal atau deduplikasi secara manual dalam bilah.
• $ detail ['rantau']: Oleh kerana json_decode menggunakan parameter sebenar, $ detail adalah array bersekutu, kuncinya diakses melalui kurungan persegi [].

3. Melaksanakan menu drop-down cascading (interaksi JavaScript)

Untuk melaksanakan fungsi cascading "Jika pengguna memilih kawasan tertentu, hanya perbandaran di bawah kawasan tersebut dipaparkan", kita perlu menggabungkan JavaScript. Pendekatan yang sama adalah lulus semua data ke hujung depan sekaligus dan kemudian menapis dan mengisi klien melalui JavaScript.

3.1 Sediakan data front-end

Agar JavaScript untuk mengakses data butiran $, kita perlu menukarnya ke format yang tersedia dalam JavaScript, biasanya rentetan JSON, dan tertanam dalam tag .

 
<script>
    // Tukar array PHP ke rentetan JSON dan berikannya kepada pembolehubah JavaScript const alldetails = @json ($ butiran); 
    // atau gunakan json.parse (&#39;{!! json_encode ($ butiran) !!}&#39;); Sekiranya pelarian ketat diperlukan 

<label untuk = "rantau"> rantau: 
<pilih name = "rantau" id = "rantau" class = "form-control">
    <opsyen nilai = ""> Sila pilih kawasan 
    @Foreach (kumpulkan ($ butiran)-> unik (&#39;rantau&#39;) sebagai detail $)
       <option value = "{{$ detail [&#39;region&#39;]}}"> {{$ detail [&#39;region&#39;]}} 
    @endforeach


<label for = "Town" class = "MT-3"> Perbandaran: 
<pilih name = "Town" id = "Town" class = "Form-control" Disabled>
    <opsyen nilai = ""> Sila pilih perbandaran 


<label for = "quarter" class = "mt-3"> blok: 
<pilih name = "quarter" id = "quarter" class = "form-control" dilumpuhkan>
    <opsyen nilai = ""> Sila pilih blok 


<label untuk = "postal_code" class = "mt-3"> kod zip: 
<input type = "text" name = "postal_code" id = "postal_code" class = "form-control" ReadOnly>
</script>

3.2 Menulis Logik JavaScript

Sekarang kami akan menambah kod JavaScript untuk mendengar perubahan dalam pemilihan kawasan dan mengemas kini menu drop-down perbandaran dan blok secara dinamik.

 <script>
    // pastikan dokumen.addeventListener (&#39;domContentLoaded&#39;, function () {
        const regionselect = document.getElementById (&#39;rantau&#39;);
        const townSelect = document.getElementById (&#39;Town&#39;);
        const quarterselect = document.getElementById (&#39;Quarter&#39;);
        const PostalCodeInput = document.getElementById (&#39;postal_code&#39;);

        /
            TownSelect.innerHtml = &#39;<option value = ""> Sila pilih Perbandaran &#39;;
            TownSelect.disabled = true;
            quarterselect.innerHtml = &#39;<option value = ""> Sila pilih blok &#39;;
            quarterselect.disabled = true;
            postalCodeInput.Value = &#39;&#39;; // Kosongkan kod pos}

        RetettownAndquarter (); // melaksanakan regionselect.addeventListener (&#39;perubahan&#39;, fungsi () {
            const selectedRegion = this.value;
            RetettownAndquarter (); // Reset jika (SelectedRegion) {
                // menapis data perbandaran yang sepadan dengan kawasan yang dipilih Const FilteredTowns = allDetails.filter (item => item [&#39;rantau&#39;] === SelectedRegion);

                // Dapatkan senarai bandar yang tidak ditiru const uniquetowns = [... set baru (filteredtowns.map (item => item [&#39;town&#39;]))]; // Perhatikan bahawa &#39;bandar&#39; mempunyai ruang // isi menu drop-down perbandaran uniquetowns.foreach (Town => {
                    const option = document.createElement (&#39;option&#39;);
                    option.value = Town;
                    option.TextContent = Town;
                    TownSelect.AppendChild (pilihan);
                });
                townSelect.disabled = false; // Dayakan menu drop-down perbandaran}
        });

        TownSelect.AdDeventListener (&#39;perubahan&#39;, fungsi () {
            const selectedRegion = regionselect.value;
            const selectedTown = this.value;
            quarterselect.innerHtml = &#39;<option value = ""> Sila pilih Blok &#39;; // Reset blok quarterselect.disabled = true;
            postalCodeInput.Value = &#39;&#39;; // Kosongkan kod pos jika (SelectedRegion && SelectedTown) {
                / 
                    item [&#39;rantau&#39;] === SelectedRegion && item [&#39;Town&#39;] === SelectedTown
                );

                // Dapatkan senarai blok bukan duplikasi const unikquarters = [... set baru (filteredquarters.map (item => item [&#39;quarter&#39;]))]; // Perhatikan bahawa &#39;suku&#39; mempunyai ruang // isi menu drop-down blok unikquarters.foreach (quarter => {
                    const option = document.createElement (&#39;option&#39;);
                    option.value = Quarter;
                    option.TextContent = Quarter;
                    QuartersElect.AppendChild (pilihan);
                });
                quarterselect.disabled = false; // Dayakan menu drop-down blok}
        });

        quarterselect.addeventListener (&#39;perubahan&#39;, fungsi () {
            const selectedRegion = regionselect.value;
            const selectedTown = townSelect.Value;
            const selectedquarter = this.value;
            postalCodeInput.Value = &#39;&#39;; // Kosongkan kod pos jika (SelectedRegion && dipilih && dipilih) {
                // Cari kod pos yang sepadan dengan constedDetail = allDetails.find (item => 
                    item [&#39;rantau&#39;] === SelectedRegion && 
                    Item [&#39;Town&#39;] === SelectedTown && 
                    Item [&#39;Quarter&#39;] === SelectedQuarter
                );

                jika (matchedDetail) {
                    postalCodeInput.Value = MatchedDetail [&#39;Poskode&#39;];
                }
            }
        });
    });
</script>

menggambarkan:

• @json ($ butiran): Ini adalah arahan yang mudah untuk Blade Laravel yang secara automatik menukarkan pembolehubah PHP ke JSON Strings dengan selamat dan mengodkan entiti HTML, yang boleh digunakan secara langsung dalam JavaScript.
• Document.AdDeventListener ('DomContentLoaded', ...): Pastikan kod JavaScript dilaksanakan selepas dokumen HTML dimuatkan sepenuhnya dan dihuraikan.
• penapis () dan peta (): Kaedah umum untuk tatasusunan JavaScript, digunakan untuk menapis dan mengubah data.
• [... set baru (...)]: Sintaks JavaScript ringkas untuk mengekstrak unsur -unsur unik dari array.
• Hartanah Dilumpuhkan: Lumpuhkan menu drop-down berikutnya sebelum pengguna membuat pilihan yang sah.
• Perhatikan Nama Utama: Terdapat ruang di hujung bandar dan nama utama suku dalam data JSON anda. Pastikan untuk menyimpan ruang ini apabila mengakses JavaScript, contohnya item ['Town']. Dalam pembangunan sebenar, adalah disyorkan untuk memastikan nama -nama utama diseragamkan dan mengelakkan ruang.

3.3 Pertimbangan set data yang besar

Jika fail JSON anda sangat besar, memuatkan semua data ke hujung depan sekaligus boleh menyebabkan masalah prestasi. Dalam kes ini, pendekatan yang lebih baik ialah:

1. Memuatkan awal: Hanya memuatkan data dari menu drop-down pertama (seperti "kawasan") apabila halaman dimuatkan.
2. Permintaan AJAX: Apabila pengguna memilih rantau, permintaan AJAX dihantar ke backend melalui JavaScript (contohnya, menggunakan API atau AXIOS), mengambil rantau yang dipilih sebagai parameter.
3. Penapisan Backend: Selepas pengawal backend menerima permintaan itu, ia menapis data perbandaran yang sepadan dari fail JSON mengikut parameter dan mengembalikannya dalam format JSON.
4. Kemas kini Front-End: Selepas JavaScript menerima data yang dikembalikan oleh back-end, secara dinamik mengisi menu drop-down perbandaran.
5. Ulang: Ulangi proses ini untuk blok berikutnya, dan lain-lain menu drop-down.

Kaedah ini dapat mengurangkan jumlah data yang dimuatkan pada halaman awal dan meningkatkan pengalaman pengguna.

Meringkaskan

Melalui langkah -langkah di atas, anda telah belajar bagaimana untuk memuatkan dan menghuraikan fail JSON tempatan dalam aplikasi Laravel anda dan memaparkan data mereka secara dinamik dalam templat bilah anda. Sama ada ia adalah menu drop-down yang mudah atau pemilih cascading yang kompleks, digabungkan dengan kuasa pemprosesan back-end Laravel dan interaktiviti JavaScript front-end, anda boleh membina bentuk yang kuat dan mesra pengguna. Dalam projek sebenar, pastikan anda mempertimbangkan saiz data dan pilih strategi pemuatan dan interaksi yang paling sesuai.

Atas ialah kandungan terperinci Menggunakan data JSON dengan cekap untuk melaksanakan menu drop-down cascading dalam templat bilah laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!