JSON 데이터를 효율적으로 사용하여 Laravel 블레이드 템플릿에서 계단식 드롭 다운 메뉴를 구현합니다.

이 기사는 Laravel 애플리케이션에 로컬 JSON 파일을로드하고 데이터를 블레이드 템플릿으로 전달하는 방법에 대해 자세히 설명합니다. 컨트롤러에 의해 JSON 구문 분석을 처리함으로써 View Layer는 Blade의 @foreach 명령어를 사용하여 데이터를 가로 지르고 동적 드롭 다운 메뉴를 달성합니다. 특히,이 기사는 JavaScript를 결합하여 다단계 Linkage 드롭 다운 메뉴 기능을 구현하여 사용자에게 선택을 기반으로 동적 컨텐츠 디스플레이를 제공하는 방법을 심층적으로 탐구하고 이러한 상호 작용을 구현하기위한 실제 코드 예제 및 예방 조치를 제공합니다.

최신 웹 애플리케이션 개발에서는 로컬 JSON 파일과 같은 비 다단 소스의 데이터를로드하고 특히 동적 양식 또는 데이터 선택기를 구축 할 때 사용자에게 제시해야합니다. Laravel 프레임 워크는 그러한 요구를 처리하기위한 간결한 메커니즘을 제공합니다. 이 기사에서는 JSON 데이터를 Laravel Blade View에 통합하고 다단계 연결 드롭 다운 메뉴를 더 구현하는 방법에 대해 안내합니다.

1. JSON 데이터로드 및 구문 분석

먼저 Laravel 컨트롤러에서 JSON 파일을 읽고 구문 분석해야합니다. 이것은 일반적으로보기 렌더링을 처리하는 방식으로 수행됩니다.

  php

네임 스페이스 앱 \ http \ 컨트롤러;

Illuminate \ http \ request를 사용하십시오.

클래스 usercontroller는 컨트롤러를 확장합니다
{
    /**
     * 사용자 양식을 작성하려면보기가 표시됩니다.
     *
     * @return \ Illuminate \ view \ view
     */
    공개 함수 create ()
    {
        // JSON 파일의 전체 경로를 빌드 // base_path () 함수는 프로젝트 루트의 절대 경로를 반환합니다.

        // (! file_exists ($ jsonFilePath)) {if if If If If If If If If If If If If If If If If If If If If If If 파일이 있는지 확인하십시오.
            // 예외를 던지거나 오류 메시지를 반환하는 것과 같이 실제 상황에 따라 파일에 존재하지 않는 오류를 처리합니다 ()-> withErrors ( 'JSON 데이터 파일이 존재하지 않습니다!');
        }

        // JSON 파일의 내용을 읽습니다. $ jsonstring = file_get_contents ($ jsonFilePath);

        // json 문자열을 php 배열로 디코딩하십시오. // 두 번째 매개 변수는 객체 $ reveral = json_decode ($ jsonstring, true) 대신 JSON 객체를 연관 배열로 디코딩합니다.

        // 디코딩이 성공했는지 확인합니다.
            // JSON 구문 분석 오류 처리 return back ()-> witherRors ( 'JSON 데이터 구문 분석 실패 :'.
        }

        // 구문 분석 된 데이터를 뷰 return view로 전달합니다 ( 'user.create')-> with ( 'reduction', $ details);
    }
}

설명 :

• base_path ( 'resources/data/address.json') : JSON 파일을 가져 오는 데 사용되는 절대 경로. 쉬운 관리를 위해 이러한 정적 데이터 파일을 리소스 디렉토리에 배치하는 것이 좋습니다.
• file_get_contents () : 전체 파일을 문자열로 읽습니다.
• JSON_DECODE ($ jsonstring, true) : JSON 문자열을 PHP 변수로 디코딩합니다. 실제 매개 변수를 전달하면 JSON 객체를 연관 배열로 변환합니다. 블레이드 템플릿의 키 이름을 통해 데이터에 액세스 할 때 더 편리합니다.
• 오류 처리 : 추가 파일 존재 검사 및 JSON 디코딩 오류 검사, 프로덕션 환경에서 강력한 코드의 필요한 부분 인 JSON 디코딩 오류 확인.

2. 블레이드 템플릿에 데이터 표시 (기본 드롭 다운 메뉴)

블레이드 뷰에서 @fifeach 루프를 사용하여 컨트롤러가 전달한 배열을 반복하고 HTML 태그를 생성 할 수 있습니다.

주소. json 파일 구조가 다음과 같습니다.

 [의 뜻
 {
   "지역": "Naypyitaw Union Territory",
   "타운": "Za Bu Thi Ri 타운 쉽",
   "쿼터": "Zay Ya Theik Di Quarter",
   "우편 번호": 1501001
},
 {
   "지역": "Naypyitaw Union Territory",
   "타운": "Za Bu Thi Ri 타운 쉽",
   "쿼터": "Pyin Nyar Theik Di Quarter",
   "우편 번호": 1501002
}
]]

사용자/create.blade.php 파일에서 다음과 같은 지역 드롭 다운 메뉴를 표시 할 수 있습니다.

 <label for="region"> 지역 : </label>
<select name="region" id="region" class="form-control">
     영역을 선택하십시오 옵션>
    {{-Array_unique를 사용하여 영역이 반복되지 않도록합니다-}}
    @foreach ($ details-> 고유 ( '지역') AS $ 세부 사항)
        {{$ detail [ 'region']}} 옵션>
    @endforeach
선택></select>

설명 :

• $ 세부 사항은 컨트롤러에서 전달 된 전체 JSON 데이터 배열입니다.
• $ details-> 고유 ( '지역') : 드롭 다운 메뉴에서 중복 영역 옵션을 피하기 위해 블레이드에서 Laravel Collection의 고유 () 메소드를 사용할 수 있습니다. 이를 위해서는 $ details 변수가 Laravel 컬렉션 (수집을 통해 컨트롤러에서 변환 할 수 있습니다 ($ details) 또는 Collect ($ details)-> 고유 ( '지역')를 사용하여 Blade에서 직접 변환 할 수 있습니다. $ 세부 사항이 일반적인 PHP 배열 인 경우 컨트롤러의 중복 제거 또는 블레이드의 수동 중복 제거를 처리해야합니다.
• $ detail [ 'region'] : JSON_DECODE는 True 매개 변수를 사용하므로 $ detail은 연관 배열이며, 키는 사각형 브래킷을 통해 액세스됩니다 [].

3. 계단식 드롭 다운 메뉴 구현 (JavaScript 상호 작용)

"사용자가 특정 지역을 선택하면 해당 지역의 타운 쉽 만 표시되는 경우"의 계단식 기능을 구현하려면 JavaScript를 결합해야합니다. 일반적인 접근 방식은 모든 데이터를 한 번에 프론트 엔드로 전달한 다음 JavaScript를 통해 클라이언트를 필터링하고 채우는 것입니다.

3.1 프론트 엔드 데이터 준비

JavaScript가 $ 세부 사항 데이터에 액세스하려면 JavaScript, 일반적으로 JSON 문자열로 사용 가능한 형식으로 변환하고 <script> 태그에 포함시켜야합니다.</script>

 의 어딘가에
<cript>
    // PHP 배열을 JSON 문자열로 변환하여 javaScript 변수 const allDetails = @json ($ details)에 할당합니다. 
    // 또는 json.parse를 사용합니다 ( '{!! JSON_ENCODE ($ details) !!}'); 엄격한 탈출이 필요한 경우 

<label for="region"> 지역 : </label>
<select name="region" id="region" class="form-control">
     영역을 선택하십시오 옵션>
    @foreach (수집 ($ details)-> 고유 ( 'Region')는 $ detail)
        {{$ detail [ 'region']}} 옵션>
    @endforeach
선택>

<label for="town" class="mt-3"> Township : </label>
<select name="town" id="town" class="form-control" disabled>
     타운 쉽 옵션>을 선택하십시오
선택>

<label for="Quarter" class="mt-3"> block : </label>
<select name="Quarter" id="Quarter" class="form-control" disabled>
     블록 옵션>을 선택하십시오
선택>

<label for="postal_code" class="mt-3"> 우편 번호 : </label>

</select></select></select></cript>

3.2 자바 스크립트 논리 작성

이제 JavaScript 코드를 추가하여 지역 선택의 변경 사항을 듣고 타운십을 업데이트하고 드롭 다운 메뉴를 동적으로 블록합니다.

 <cript>
    // hudeg.AdDeventListener ( 'domContentLoaded', function () {
        const greatesLect = document.getElementById ( 'region');
        const townselect = document.getElementById ( 'town');
        const QuarterSelect = document.getElementById ( 'Quarter');
        const postalcodeinput = document.getElementById ( 'postal_code');

        // 타운을 지우고 비활성화하고 블록 드롭 다운 메뉴 함수 resettownandquarter () {
            townselect.innerhtml = ' Township 옵션>'을 선택하십시오.
            townselect.disabled = true;
            QuarterSelect.innerHtml = ' 블록 옵션>';
            QuarterSelect.disabled = true;
            postalcodeinput.value = ''; // 우편 번호 지우기}

        resettownandquarter (); // executeSelect.AdDeventListener ( 'Change', function () {
            const selectedregion = this.value;
            resettownandquarter (); // if (selectionregion) {retet {
                // 선택한 영역과 일치하는 타운 쉽 데이터를 필터링하는 필터링 타운 = allDetails.filter (item => item [ 'region'] === SelectedRugion);

                // 복제되지 않은 도시 목록을 가져옵니다. const iriquetowns = [... 새 세트 (filterstowns.map (item => item [ 'town]])]; // '타운'은 공간이 있습니다. // 타운십 드롭 다운 메뉴를 채우는 데 주목하십시오.
                    const 옵션 = document.createelement ( '옵션');
                    옵션 .value = 도시;
                    옵션 .textContent = Town;
                    Townselect.appendChild (옵션);
                });
                townselect.disabled = false; // 타운십 드롭 다운 메뉴 활성화}
        });

        townselect.addeventListener ( 'Change', function () {
            const selectedregion = regionSelect.Value;
            const selectedtown = this.value;
            QuarterSelect.innerHtml = ' 블록 옵션>'; // QuarterSelect를 재설정합니다 .disabled = true;
            postalcodeinput.value = ''; // 우편 번호를 지우는 경우 (selectedregion && selectedtown) {
                // 선택한 영역 및 타운 쉽 Const Filtersquarters = AllDetails.filter (item => 일치하는 블록 데이터 필터 
                    항목 [ 'Region'] === Selected Region && item [ 'town'] === Selectedtown
                );

                // 비 중복 블록 목록을 가져옵니다. const orvightQuarters = [... 새 세트 (filtersquarters.map (item => item [ 'Quarter'])]; // 'Quarter'는 공백이 있습니다. // 블록 드롭 다운 메뉴를 채우는 데 주목하십시오.
                    const 옵션 = document.createelement ( '옵션');
                    옵션 .value = 1/4;
                    옵션 .textContent = 1/4;
                    QuarterSelect.appendChild (옵션);
                });
                QuarterSelect.disabled = false; // 블록 드롭 다운 메뉴 활성화}
        });

        QuarterSelect.AdDeventListener ( 'Change', function () {
            const selectedregion = regionSelect.Value;
            const selectedtown = townselect.value;
            const selectedQuarter = this.value;
            postalcodeinput.value = ''; // 우편 번호를 지우는 경우 (selectedregion && selectedtown && selectedQuarter) {
                // 해당 우편 번호를 찾으십시오. const matchedDetail = allDetails.Find (item => 
                    항목 [ 'Region'] === Selected Region && 
                    항목 [ 'town'] === selectedtown && 
                    항목 [ 'Quarter'] === SelectedQuarter
                );

                if (matchedDetail) {
                    postalcodeinput.value = matchedDetail [ 'postal code'];
                }
            }
        });
    });
스크립트></cript>

설명 :

• @JSON ($ details) : PHP 변수를 자동으로 JSON 문자열로 안전하게 변환하고 JavaScript에서 직접 사용할 수있는 HTML 엔티티를 인코딩하는 Laravel Blade의 편리한 지침입니다.
• ADDEVENTLISTERE ( 'domContentLoaded', ...) : HTML 문서가 완전히로드되고 구문 분석 된 후 JavaScript 코드가 실행되는지 확인하십시오.
• 필터 () 및 map () : 데이터를 필터링하고 변환하는 데 사용되는 JavaScript 배열의 일반적인 메소드.
• [... 새 세트 (...)] : 배열에서 고유 한 요소를 추출하기위한 간결한 JavaScript 구문.
• 장애인 속성 : 사용자가 유효한 선택을하기 전에 후속 드롭 다운 메뉴를 비활성화합니다.
• 키 이름 참고 : 도시 끝에 공간이 있으며 JSON 데이터에는 분기 키 이름이 있습니다. JavaScript에서 액세스 할 때 이러한 공간을 유지하십시오 (예 : 항목 [타운). 실제 개발에서는 키 이름을 표준화하고 공간을 피하는 것이 좋습니다.

3.3 큰 데이터 세트의 고려 사항

JSON 파일이 매우 크면 모든 데이터를 한 번에 프론트 엔드에로드하면 성능 문제가 발생할 수 있습니다. 이 경우 더 나은 접근 방식은 다음과 같습니다.

1. 초기 로딩 : 페이지가로드 될 때 첫 번째 드롭 다운 메뉴 (예 : "영역")에서 데이터 만로드합니다.
2. AJAX 요청 : 사용자가 영역을 선택하면 ajax 요청이 JavaScript (예 : Fetch API 또는 Axios 사용)를 통해 백엔드로 전송되어 선택한 영역을 매개 변수로 사용합니다.
3. 백엔드 필터링 : 백엔드 컨트롤러가 요청을 수신 한 후 매개 변수에 따라 JSON 파일에서 해당 타운 쉽 데이터를 필터링하고 JSON 형식으로 반환합니다.
4. 프론트 엔드 업데이트 : JavaScript가 백엔드로 반환 된 데이터를 수신 한 후 타운 쉽 드롭 다운 메뉴를 동적으로 채 웁니다.
5. 반복 : 후속 블록 등 이이 과정을 반복하십시오. 드롭 다운 메뉴.

이 방법은 초기 페이지에로드 된 데이터 양을 줄이고 사용자 경험을 향상시킬 수 있습니다.

요약

위의 단계를 통해 Laravel 애플리케이션에 로컬 JSON 파일을로드하고 구문 분석하고 블레이드 템플릿에 데이터를 동적으로 표시하는 방법을 배웠습니다. Laravel의 백엔드 처리 능력 및 프론트 엔드 JavaScript Interactivity와 결합 된 간단한 드롭 다운 메뉴 또는 복잡한 계단식 선택기이든 강력하고 사용자 친화적 인 양식을 구축 할 수 있습니다. 실제 프로젝트에서는 데이터 크기를 고려하고 가장 적합한 로딩 및 상호 작용 전략을 선택하십시오.

위 내용은 JSON 데이터를 효율적으로 사용하여 Laravel 블레이드 템플릿에서 계단식 드롭 다운 메뉴를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!