JSON 데이터를 사용하여 Laravel 블레이드에서 동적 계단식 드롭 다운 메뉴 구축

이 기사는 Laravel 애플리케이션에 JSON 파일을로드하고 데이터를 블레이드 템플릿으로 전달하는 방법에 대해 자세히 설명하며 프론트 엔드 JavaScript를 사용하여 동적 캐스케이드 드롭 다운 메뉴를 구현합니다. 자습서는 컨트롤러 측에서 블레이드 템플릿의 기본 트래버살로 JSON 데이터를 읽고 디코딩하는 것을 포함하여 동적 데이터 필터링 및 드롭 다운 메뉴 업데이트를 구현하여 JavaScript Logic을 통해 사용자 선택을 기반으로 한 드롭 다운 메뉴 업데이트를 구현하여 개발자가 구조화 된 데이터를 효율적으로 표시 할 수 있도록 돕습니다.

1. 소개

웹 개발에서는 종종 정적 데이터 소스 (예 : JSON 파일)의 데이터를로드하고 캐스케이드 선택기 구축과 같은 프론트 엔드 페이지에 대화식으로 표시해야합니다. Laravel Framework는 강력한 블레이드 템플릿 엔진과 프론트 엔드 JavaScript 기능을 결합 하여이 요구 사항을 우아하게 달성합니다. 이 기사는 주소 선택기를 예제로 사용하여 JSON 데이터를 사용하여 동적 계단식 드롭 다운 메뉴를 구축하는 방법을 자세히 설명합니다.

지역, 타운, 쿼터 및 우편 번호가있는 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
  },
  {
    "지역": "다른 지역",
    "타운": "일부 마을",
    "분기": "일부 분기",
    "우편 번호": 2000001
  }
]]

우리의 목표는 다음과 같습니다. 사용자가 "지역"을 선택하면 "타운"드롭 다운 메뉴는 해당 지역의 모든 도시를 자동으로 업데이트합니다. "타운"이 선택되면 "쿼터"드롭 다운 메뉴는 도시의 모든 분기를 자동으로 업데이트합니다.

2. 데이터 준비 : 컨트롤러에서 JSON 처리

먼저 Laravel 컨트롤러의 JSON 파일을 읽고 PHP 배열로 구문 분석하여 블레이드 뷰로 전달해야합니다.

  php

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

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

클래스 usercontroller는 컨트롤러를 확장합니다
{
    /**
     * 디스플레이 사용자 양식 생성 및 주소 데이터를로드합니다.
     *
     * @return \ Illuminate \ view \ view
     */
    공개 함수 create ()
    {
        // JSON 파일이 리소스/data/address.json에 있는지 확인하십시오.
        $ JSONFILEPATH = BASE_PATH ( 'resources/data/address.json');

        // 파일이 존재하는지 확인 (! file_exists ($ jsonFilePath)) {
            // 예외를 던지거나 오류 메시지 중단 (500, '주소 데이터 파일을 찾을 수 없음')과 같은 실제 요구에 따라 파일이 존재하지 않는 경우를 처리합니다.
        }

        $ jsonstring = file_get_contents ($ jsonfilepath);

        // json 문자열을 php 배열로 디코딩 // 두 번째 매개 변수 'true'는 객체가 아닌 연관 배열로 디코딩 된 것을 의미합니다.

        // JSON 디코딩이 성공했는지 확인 if (json_last_error ()! == json_error_none) {
            // JSON 구문 분석 오류 중단 (500, '주소 데이터를 디코딩하지 못했습니다 :'. JSON_LAST_ERROR_MSG ());
        }

        // view return view로 데이터를 전달합니다 ( 'user.create')-> with ( 'details', $ details);
    }
}

코드 설명 :

• base_path ( 'resources/data/address.json') : JSON 파일의 절대 경로를 가져옵니다. 쉽게 관리 할 수 있도록 정적 데이터 파일을 리소스 디렉토리에 배치하는 것이 좋습니다.
• file_get_contents () : 전체 파일의 내용을 문자열로 읽습니다.
• JSON_DECODE ($ jsonstring, true) : JSON 문자열을 PHP 데이터 구조로 디코딩합니다. 키는 두 번째 매개 변수 인 True이며, JSON 객체가 PHP 연관 배열로 디코딩되도록 강요하는데, 이는 블레이드 템플릿의 키 이름을 통해 데이터에 액세스 할 때 더 편리합니다 (예 : $ detail [ 'region']). 사실이 없으면 PHP 객체로 디코딩되며 $ detail-> 영역을 통해 액세스해야합니다.
• JSON_LAST_ERROR () 및 JSON_LAST_ERROR_MSG () : JSON 디코딩 프로세스 중에 오류가 발생하는지 확인하는 데 사용됩니다. 이는 생산 환경에서 매우 중요합니다.

3. 기본 표시 : 블레이드의 트래버스 및 디스플레이 데이터

컨트롤러가 $ 세부 사항 데이터를 사용자에게 전달한 후에는 블레이드 템플릿 에서이 데이터를 통과하여 첫 번째 드롭 다운 메뉴 (예 : "영역")를 만들 수 있습니다.

 




    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> 사용자 생성 </title>


    <h1> 새 사용자 생성 </h1>

    

@CSRF

지역 : 를 선택하십시오 영역을 선택하십시오 옵션> @foreach (수집 ($ details)-> 고유 ( 'Region')는 $ detail) {{$ detail [ 'region']}} 옵션> @endforeach 선택>

Town : 를 선택하십시오 타운 옵션>을 선택하십시오 선택>

Quarter : 분기 옵션>을 선택하십시오 선택>

우편 번호 :

제출

코드 설명 :

• @foreach (Collect ($ details)-> 고유 ( 'Region') AS $ 세부 사항) : Laravel 컬렉션의 고유 한 ( '지역') 메소드는 여기에서 "지역"드롭 다운 메뉴에 중복 옵션이 없는지 확인하기 위해 여기에서 사용됩니다. 수집 ($ 세부 사항) PHP 배열을 Laravel 컬렉션으로 변환하여 수집 방법을 사용하도록합니다.
• {{$ detail [ 'region']}} : 연관 배열의 값에 대한 액세스를 올바르게 액세스합니다.
• value = "{{{$ detail [ 'region']}}": 옵션 태그의 값 속성을 설정합니다. 이는 양식이 제출 될 때 실제로 보낸 값입니다.
• id = "Region-Select"등 : 드롭 다운 메뉴에 ID를 추가하여 JavaScript 액세스를 용이하게합니다.
• 비활성화 : 사용자가 상단 옵션을 선택할 때까지 처음에는 "타운"및 "쿼터"드롭 다운 메뉴를 비활성화합니다.

4. 동적 계단식 드롭 다운 메뉴를 구현하십시오

동적 계단식 드롭 다운 메뉴를 구현하는 핵심은 프론트 엔드 JavaScript에 있습니다. 상단 드롭 다운 메뉴의 변경 이벤트를 듣고 선택한 값에 따라 원래 데이터를 필터링하고 하단 드롭 다운 메뉴의 옵션을 동적으로 업데이트해야합니다.

사용자/create.blade.php 파일의

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