在 Laravel Blade 模板中高效利用 JSON 數據實現級聯下拉菜單

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

在現代Web 應用開發中，經常需要從非數據庫源（如本地JSON 文件）加載數據並將其展示給用戶，尤其是在構建動態表單或數據選擇器時。 Laravel 框架提供了簡潔的機制來處理這類需求。本文將指導您如何將JSON 數據集成到Laravel Blade 視圖中，並進一步實現多級聯動的下拉菜單。

1. 加載和解析JSON 數據

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

 <?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

        // 檢查文件是否存在以避免錯誤if (!file_exists($jsonFilePath)) {
            // 根據實際情況處理文件不存在的錯誤，例如拋出異常或返回錯誤信息return back()->withErrors('JSON 數據文件不存在！');
        }

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

        // 將JSON 字符串解碼為PHP 數組// 第二個參數true 表示將JSON 對象解碼為關聯數組，而非對象$details = json_decode($jsonString, true);

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

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

說明：

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

2. 在Blade 模板中顯示數據（基礎下拉菜單）

在Blade 視圖中，您可以使用@foreach 循環來遍歷控制器傳遞過來的數組，並生成HTML 標籤。

假設您的address.json 文件結構如下：

 [
 {
   "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 文件中，您可以這樣顯示區域（Region）下拉菜單：

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

說明：

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

3. 實現級聯下拉菜單（JavaScript 交互）

要實現“如果用戶選擇了某個區域，則只顯示該區域下的鄉鎮”這樣的級聯功能，我們需要結合JavaScript。一種常見的方法是將所有數據一次性傳遞到前端，然後通過JavaScript 在客戶端進行過濾和填充。

3.1 準備前端數據

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

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

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

<label for="town" class="mt-3">鄉鎮:</label>
<select name="town" id="town" class="form-control" disabled>
    <option value="">請選擇鄉鎮</option>
</select>

<label for="quarter" class="mt-3">街區:</label>
<select name="quarter" id="quarter" class="form-control" disabled>
    <option value="">請選擇街區</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 邏輯

現在，我們將添加JavaScript 代碼來監聽區域選擇的變化，並動態更新鄉鎮和街區下拉菜單。

 <script>
    // 確保DOM 加載完成後執行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;);

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

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

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

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

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

        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) {
                // 找到對應的郵政編碼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 的一個便捷指令，它會自動將PHP 變量安全地轉換為JSON 字符串，並進行HTML 實體編碼，可以直接在JavaScript 中使用。
• document.addEventListener('DOMContentLoaded', ...)：確保在HTML 文檔完全加載和解析後執行JavaScript 代碼。
• filter() 和map()：JavaScript 數組的常用方法，用於過濾和轉換數據。
• [...new Set(...)]：一種簡潔的JavaScript 語法，用於從數組中提取唯一的元素。
• disabled 屬性：在用戶未做出有效選擇前，禁用後續的下拉菜單。
• 注意鍵名：您的JSON 數據中Town 和Quarter 鍵名末尾有空格。在JavaScript 中訪問時，請務必保留這些空格，例如item['Town ']。在實際開發中，建議保持鍵名的規範性，避免空格。

3.3 大型數據集的考慮

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

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

這種方法可以減少初始頁面加載的數據量，提高用戶體驗。

總結

通過以上步驟，您已經學會瞭如何在Laravel 應用程序中加載和解析本地JSON 文件，並將其數據動態地展示在Blade 模板中。無論是簡單的下拉菜單還是複雜的級聯選擇器，結合Laravel 的後端處理能力和前端JavaScript 的交互性，您都可以構建出功能強大且用戶友好的表單。在實際項目中，請務必考慮數據量大小，選擇最適合的加載和交互策略。

以上是在 Laravel Blade 模板中高效利用 JSON 數據實現級聯下拉菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章！