本文詳細(xì)介紹瞭如何在Laravel 應(yīng)用中加載本地JSON 文件，並將其數(shù)據(jù)傳遞到Blade 模板。通過控制器處理JSON 解析，視圖層利用Blade 的@foreach 指令遍歷數(shù)據(jù)，從而實(shí)現(xiàn)動(dòng)態(tài)生成下拉菜單。特別地，文章還深入探討瞭如何結(jié)合JavaScript 實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)的下拉菜單功能，為用戶提供基於選擇的動(dòng)態(tài)內(nèi)容展示，並提供了實(shí)現(xiàn)此類交互的實(shí)用代碼示例和注意事項(xiàng)。

在現(xiàn)代Web 應(yīng)用開發(fā)中，經(jīng)常需要從非數(shù)據(jù)庫源（如本地JSON 文件）加載數(shù)據(jù)並將其展示給用戶，尤其是在構(gòu)建動(dòng)態(tài)表單或數(shù)據(jù)選擇器時(shí)。 Laravel 框架提供了簡潔的機(jī)制來處理這類需求。本文將指導(dǎo)您如何將JSON 數(shù)據(jù)集成到Laravel Blade 視圖中，並進(jìn)一步實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)的下拉菜單。

1. 加載和解析JSON 數(shù)據(jù)

首先，您需要在Laravel 控制器中讀取並解析JSON 文件。這通常在處理視圖渲染的方法中完成。

 <?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * 顯示創(chuàng)建用戶表單的視圖。
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        // 構(gòu)建JSON 文件的完整路徑// base_path() 函數(shù)返回項(xiàng)目根目錄的絕對(duì)路徑$jsonFilePath = base_path(&#39;resources/data/address.json&#39;);

        // 檢查文件是否存在以避免錯(cuò)誤if (!file_exists($jsonFilePath)) {
            // 根據(jù)實(shí)際情況處理文件不存在的錯(cuò)誤，例如拋出異?；蚍祷劐e(cuò)誤信息return back()->withErrors('JSON 數(shù)據(jù)文件不存在！');
        }

        // 讀取JSON 文件的內(nèi)容$jsonString = file_get_contents($jsonFilePath);

        // 將JSON 字符串解碼為PHP 數(shù)組// 第二個(gè)參數(shù)true 表示將JSON 對(duì)象解碼為關(guān)聯(lián)數(shù)組，而非對(duì)象$details = json_decode($jsonString, true);

        // 檢查解碼是否成功if (json_last_error() !== JSON_ERROR_NONE) {
            // 處理JSON 解析錯(cuò)誤return back()->withErrors('JSON 數(shù)據(jù)解析失?。? . json_last_error_msg());
        }

        // 將解析後的數(shù)據(jù)傳遞給視圖return view('users.create')->with('details', $details);
    }
}

說明：

• base_path('resources/data/address.json')：用於獲取JSON 文件的絕對(duì)路徑。建議將這類靜態(tài)數(shù)據(jù)文件放在resources 目錄下，以便於管理。
• file_get_contents()：讀取整個(gè)文件到一個(gè)字符串。
• json_decode($jsonString, true)：將JSON 字符串解碼為PHP 變量。傳入true 參數(shù)會(huì)將JSON 對(duì)象轉(zhuǎn)換為關(guān)聯(lián)數(shù)組，這在Blade 模板中通過鍵名訪問數(shù)據(jù)時(shí)更為方便。
• 錯(cuò)誤處理：添加了文件存在性檢查和JSON 解碼錯(cuò)誤檢查，這是生產(chǎn)環(huán)境中健壯代碼的必要部分。

2. 在Blade 模板中顯示數(shù)據(jù)（基礎(chǔ)下拉菜單）

在Blade 視圖中，您可以使用@foreach 循環(huán)來遍歷控制器傳遞過來的數(shù)組，並生成HTML 標(biāo)籤。

假設(shè)您的address.json 文件結(jié)構(gòu)如下：

 [
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter ": "Zay Ya Theik Di Quarter",
   "Postal Code": 1501001
},
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter ": "Pyin Nyar Theik Di Quarter",
   "Postal Code": 1501002
}
]

在users/create.blade.php 文件中，您可以這樣顯示區(qū)域（Region）下拉菜單：

 <label for="region">區(qū)域:</label>
<select name="region" id="region" class="form-control">
    <option value="">請(qǐng)選擇區(qū)域</option>
    {{-- 使用array_unique 確保區(qū)域不重複--}}
    @foreach($details->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

說明：

• $details 是從控制器傳遞過來的整個(gè)JSON 數(shù)據(jù)數(shù)組。
• $details->unique('Region')：為了避免下拉菜單中出現(xiàn)重複的區(qū)域選項(xiàng)，我們可以在Blade 中使用Laravel 集合的unique() 方法。這要求$details 變量是一個(gè)Laravel 集合（可以通過collect($details) 在控制器中轉(zhuǎn)換，或者直接在Blade 中使用collect($details)->unique('Region')）。如果$details 只是一個(gè)普通PHP 數(shù)組，您需要在控制器中處理去重，或者在Blade 中手動(dòng)去重。
• $detail['Region']：由於json_decode 時(shí)使用了true 參數(shù)，$detail 是一個(gè)關(guān)聯(lián)數(shù)組，因此通過方括號(hào)[] 訪問其鍵。

3. 實(shí)現(xiàn)級(jí)聯(lián)下拉菜單（JavaScript 交互）

要實(shí)現(xiàn)“如果用戶選擇了某個(gè)區(qū)域，則只顯示該區(qū)域下的鄉(xiāng)鎮(zhèn)”這樣的級(jí)聯(lián)功能，我們需要結(jié)合JavaScript。一種常見的方法是將所有數(shù)據(jù)一次性傳遞到前端，然後通過JavaScript 在客戶端進(jìn)行過濾和填充。

3.1 準(zhǔn)備前端數(shù)據(jù)

為了讓JavaScript 能夠訪問到$details 數(shù)據(jù)，我們需要將其轉(zhuǎn)換為JavaScript 可用的格式，通常是JSON 字符串，並嵌入到<script> 標(biāo)籤中。</script>

 <!-- users/create.blade.php 的某個(gè)位置-->
<script>
    // 將PHP 數(shù)組轉(zhuǎn)換為JSON 字符串，並賦值給JavaScript 變量const allDetails = @json($details); 
    // 或者使用JSON.parse(&#39;{!! json_encode($details) !!}&#39;); 如果需要更嚴(yán)格的轉(zhuǎn)義</script>

<label for="region">區(qū)域:</label>
<select name="region" id="region" class="form-control">
    <option value="">請(qǐng)選擇區(qū)域</option>
    @foreach(collect($details)->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

<label for="town" class="mt-3">鄉(xiāng)鎮(zhèn):</label>
<select name="town" id="town" class="form-control" disabled>
    <option value="">請(qǐng)選擇鄉(xiāng)鎮(zhèn)</option>
</select>

<label for="quarter" class="mt-3">街區(qū):</label>
<select name="quarter" id="quarter" class="form-control" disabled>
    <option value="">請(qǐng)選擇街區(qū)</option>
</select>

<label for="postal_code" class="mt-3">郵政編碼:</label>
<input type="text" name="postal_code" id="postal_code" class="form-control" readonly>

3.2 編寫JavaScript 邏輯

現(xiàn)在，我們將添加JavaScript 代碼來監(jiān)聽區(qū)域選擇的變化，並動(dòng)態(tài)更新鄉(xiāng)鎮(zhèn)和街區(qū)下拉菜單。

 <script>
    // 確保DOM 加載完成後執(zhí)行document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
        const regionSelect = document.getElementById(&#39;region&#39;);
        const townSelect = document.getElementById(&#39;town&#39;);
        const quarterSelect = document.getElementById(&#39;quarter&#39;);
        const postalCodeInput = document.getElementById(&#39;postal_code&#39;);

        // 初始化時(shí)清空並禁用鄉(xiāng)鎮(zhèn)和街區(qū)下拉菜單function resetTownAndQuarter() {
            townSelect.innerHTML = &#39;<option value="">請(qǐng)選擇鄉(xiāng)鎮(zhèn)&#39;;
            townSelect.disabled = true;
            quarterSelect.innerHTML = &#39;<option value="">請(qǐng)選擇街區(qū)&#39;;
            quarterSelect.disabled = true;
            postalCodeInput.value = &#39;&#39;; // 清空郵政編碼}

        resetTownAndQuarter(); // 頁面加載時(shí)執(zhí)行一次regionSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = this.value;
            resetTownAndQuarter(); // 每次區(qū)域變化時(shí)重置if (selectedRegion) {
                // 過濾出與所選區(qū)域匹配的鄉(xiāng)鎮(zhèn)數(shù)據(jù)const filteredTowns = allDetails.filter(item => item[&#39;Region&#39;] === selectedRegion);

                // 獲取不重複的鄉(xiāng)鎮(zhèn)列表const uniqueTowns = [...new Set(filteredTowns.map(item => item[&#39;Town &#39;]))]; // 注意&#39;Town &#39; 有空格// 填充鄉(xiāng)鎮(zhèn)下拉菜單uniqueTowns.forEach(town => {
                    const option = document.createElement(&#39;option&#39;);
                    option.value = town;
                    option.textContent = town;
                    townSelect.appendChild(option);
                });
                townSelect.disabled = false; // 啟用鄉(xiāng)鎮(zhèn)下拉菜單}
        });

        townSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = this.value;
            quarterSelect.innerHTML = &#39;<option value="">請(qǐng)選擇街區(qū)&#39;; // 重置街區(qū)quarterSelect.disabled = true;
            postalCodeInput.value = &#39;&#39;; // 清空郵政編碼if (selectedRegion && selectedTown) {
                // 過濾出與所選區(qū)域和鄉(xiāng)鎮(zhèn)匹配的街區(qū)數(shù)據(jù)const filteredQuarters = allDetails.filter(item => 
                    item[&#39;Region&#39;] === selectedRegion && item[&#39;Town &#39;] === selectedTown
                );

                // 獲取不重複的街區(qū)列表const uniqueQuarters = [...new Set(filteredQuarters.map(item => item[&#39;Quarter &#39;]))]; // 注意&#39;Quarter &#39; 有空格// 填充街區(qū)下拉菜單uniqueQuarters.forEach(quarter => {
                    const option = document.createElement(&#39;option&#39;);
                    option.value = quarter;
                    option.textContent = quarter;
                    quarterSelect.appendChild(option);
                });
                quarterSelect.disabled = false; // 啟用街區(qū)下拉菜單}
        });

        quarterSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = townSelect.value;
            const selectedQuarter = this.value;
            postalCodeInput.value = &#39;&#39;; // 清空郵政編碼if (selectedRegion && selectedTown && selectedQuarter) {
                // 找到對(duì)應(yīng)的郵政編碼const matchedDetail = allDetails.find(item => 
                    item[&#39;Region&#39;] === selectedRegion && 
                    item[&#39;Town &#39;] === selectedTown && 
                    item[&#39;Quarter &#39;] === selectedQuarter
                );

                if (matchedDetail) {
                    postalCodeInput.value = matchedDetail[&#39;Postal Code&#39;];
                }
            }
        });
    });
</script>

說明：

• @json($details)：這是Laravel Blade 的一個(gè)便捷指令，它會(huì)自動(dòng)將PHP 變量安全地轉(zhuǎn)換為JSON 字符串，並進(jìn)行HTML 實(shí)體編碼，可以直接在JavaScript 中使用。
• document.addEventListener('DOMContentLoaded', ...)：確保在HTML 文檔完全加載和解析後執(zhí)行JavaScript 代碼。
• filter() 和map()：JavaScript 數(shù)組的常用方法，用於過濾和轉(zhuǎn)換數(shù)據(jù)。
• [...new Set(...)]：一種簡潔的JavaScript 語法，用於從數(shù)組中提取唯一的元素。
• disabled 屬性：在用戶未做出有效選擇前，禁用後續(xù)的下拉菜單。
• 注意鍵名：您的JSON 數(shù)據(jù)中Town 和Quarter 鍵名末尾有空格。在JavaScript 中訪問時(shí)，請(qǐng)務(wù)必保留這些空格，例如item['Town ']。在實(shí)際開發(fā)中，建議保持鍵名的規(guī)範(fàn)性，避免空格。

3.3 大型數(shù)據(jù)集的考慮

如果您的JSON 文件非常大，一次性將所有數(shù)據(jù)加載到前端可能會(huì)導(dǎo)致性能問題。在這種情況下，更好的做法是：

1. 初始加載：只在頁面加載時(shí)加載第一個(gè)下拉菜單（例如“區(qū)域”）的數(shù)據(jù)。
2. AJAX 請(qǐng)求：當(dāng)用戶選擇一個(gè)區(qū)域時(shí)，通過JavaScript (例如使用fetch API 或Axios) 向後端發(fā)送一個(gè)AJAX 請(qǐng)求，將所選區(qū)域作為參數(shù)。
3. 後端過濾：後端控制器接收到請(qǐng)求後，根據(jù)參數(shù)從JSON 文件中過濾出對(duì)應(yīng)的鄉(xiāng)鎮(zhèn)數(shù)據(jù)，並以JSON 格式返回。
4. 前端更新： JavaScript 接收到後端返回的數(shù)據(jù)後，動(dòng)態(tài)填充鄉(xiāng)鎮(zhèn)下拉菜單。
5. 重複：對(duì)後續(xù)的街區(qū)等下拉菜單重複此過程。

這種方法可以減少初始頁面加載的數(shù)據(jù)量，提高用戶體驗(yàn)。

總結(jié)

通過以上步驟，您已經(jīng)學(xué)會(huì)瞭如何在Laravel 應(yīng)用程序中加載和解析本地JSON 文件，並將其數(shù)據(jù)動(dòng)態(tài)地展示在Blade 模板中。無論是簡單的下拉菜單還是複雜的級(jí)聯(lián)選擇器，結(jié)合Laravel 的後端處理能力和前端JavaScript 的交互性，您都可以構(gòu)建出功能強(qiáng)大且用戶友好的表單。在實(shí)際項(xiàng)目中，請(qǐng)務(wù)必考慮數(shù)據(jù)量大小，選擇最適合的加載和交互策略。

以上是在 Laravel Blade 模板中高效利用 JSON 數(shù)據(jù)實(shí)現(xiàn)級(jí)聯(lián)下拉菜單的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！