ThinkPHP 사용 경험 공유 - ThinkPHP + Ajax로 2단계 연계 드롭다운 메뉴 구현

첫 번째는 데이터베이스 디자인입니다. 분류 테이블을 cate라고 합니다.

제가 하는 일은 분류된 데이터의 2차 연결입니다. 데이터에 필요한 필드는 id, 이름(중국어 이름), pid(상위 ID)입니다.

상위 ID 설정: 데이터에 상위 레벨이 없는 경우 상위 ID는 0입니다. 상위 레벨이 있는 경우 상위 ID는 상위 ID입니다.

데이터베이스에 콘텐츠가 포함되면 보조 연결을 구현하는 코드 작성을 시작할 수 있습니다.

먼저 백그라운드 php에서 pid 0인 모든 데이터를 가져와서 $cate에 저장한 다음 foreach 루프를 사용하여 첫 번째 레이어의 에 출력합니다.

Html 코드:

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name=&#39;cate&#39; item=&#39;v&#39;>
         <option value="{$v[&#39;ca_id&#39;]}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签：
 <select name="lable" size="1" id="lables">
 </select>

Ajax 코드:

  $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value=&#39;"+data[i].ca_id+"&#39;>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax 코드는 첫 번째 레이어 유형이 변경된 후 트리거됩니다.

1.url: ajax가 백그라운드에서 수신되는 주소

2.data: 백그라운드로 전송되는 데이터는 일반적으로 json으로 전달됩니다. 선택한 클래스의 값입니다.

3.type: 전송 방법에는 get과 post 방법이 있습니다. 저는 주로 get보다 더 많은 데이터를 전송할 수 있고 더 안전한 post를 사용합니다.

4.error: ajax 실행; 실패 메소드;

5.success: 콜백 함수인 Ajax 실행 메소드. 여기서 성공을 실행할 때 먼저 empty()를 사용하여 두 번째 드롭다운 메뉴의 내용을 지운 다음 백그라운드에서 얻은 데이터를 출력합니다.

다음은 Thinkphp가 Ajax 데이터를 받아 처리하는 페이지입니다

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Thinkphp의 I() 메소드는 실제로 $_POST[]로 간주하여 첫 번째 레이어를 통과하게 됩니다. by ajax 콘텐츠의 ID를 선택한 다음 해당 하위 클래스를 가져온 다음 ajaxReturn()을 사용하여 이를 ajax로 반환합니다. 반환 데이터는 json 형식으로 설정되므로 ajax는 json 형식으로 데이터를 받습니다.

기본 PHP 반환 데이터 방법:

   //搜索结果为$result
   .....
   echo json_encode($result);

이렇게 하면 2단계 연결 드롭다운 메뉴 구현이 완료됩니다. URL이 정확해야 하며 수신 시 반환 값이 있어야 합니다. 그렇지 않으면 ajax는 성공 메소드를 실행하지 않습니다.

ThinkPHP 사용 경험에 대한 더 많은 공유를 원하시면 ThinkPHP + Ajax를 통해 2단계 연결 드롭다운 메뉴를 구현하세요. PHP 중국어 웹사이트에서 관련 기사를 주목해주세요!

관련 라벨：

ThinkPHP Ajax

원천：php.cn

이전 기사：Yii2 프레임워크 연구 노트(4) -- 첫 번째 위젯 다음 기사：Yii2 프레임워크 연구 노트(5) -- 백엔드용 스킨 변경

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• HTML에서 굵게, 기울임꼴, 밑줄, 취소선 등 글꼴 효과를 설정하는 예를 소개합니다.
  1970-01-01 08:00:00
• Java 버전의 Redis 구현
  1970-01-01 08:00:00
• 가장 간단한 WeChat 애플릿 데모
  1970-01-01 08:00:00
• Python에서 pandas.DataFrame(생성, 색인, 추가 및 삭제)의 간단한 작업 방법 소개
  1970-01-01 08:00:00
• 위챗 미니 프로그램: 탭 효과 구현 방법 예시
  1970-01-01 08:00:00
• Python은 사전 구조 출력을 아름답게 하기 위해 사용자 정의 메소드를 구성합니다.
  1970-01-01 08:00:00
• HTML5: Canvas를 사용하여 실시간으로 비디오 처리
  1970-01-01 08:00:00
• Asp.net은 SignalR을 사용하여 사진을 보냅니다.
  1970-01-01 08:00:00
• WeChat Mini 프로그램 개발 튜토리얼-App() 및 Page() 기능 개요
  1970-01-01 08:00:00
• Python Redis 사용법에 대한 자세한 설명
  1970-01-01 08:00:00

최신 이슈

Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...

에서 2024-04-04 22:16:18

0

1

1450

수정된 제목: 체크박스 선택에 따라 합계 계산 저는 간단한 금융 추적 애플리케이션을 개발 중입니다. 애플리케이션에는 모든 비용 청구서가 포함된 테이블이 있고 테이블 외부에 총 금액이 표시됩니다. JS 또는 A...

에서 2024-04-04 13:45:50

0

1

3465

Ajax를 사용하여 콘텐츠 생성 - ID로 스크롤하면 작동하지 않습니다. Ajax를 통해 얻은 데이터를 기반으로 페이지 콘텐츠를 생성합니다. 내가 겪고 있는 문제는 특정 ID로 스크롤하려고 할 때 스크롤이 발생하지 않거나 잘못된 위치로...

에서 2024-04-04 09:29:39

0

1

397

ajax에서 Django로 여러 목록을 전달하는 방법 문제가 있습니다. 목록에서 모든 데이터를 가져오고 싶기 때문에 선택한 항목의 각 데이터를 반복하여 데이터베이스에 삽입하려고 합니다. 현재 ['[objectObje...

에서 2024-04-03 23:20:06

0

1

362

Ajax 및 PHP를 사용하여 CodeIgniter에 여러 이미지 파일 업로드 여러 이미지 파일을 서버 측에 업로드하는 데 문제가 있습니다. 누군가가 코드의 문제점을 강조할 수 있다면 좋을 것입니다. 처음에는 HTML 코드가 있습니다: &l...

에서 2024-04-03 22:35:03

0

1

318

관련 주제

더>

• 트랜잭션 범위 사용법
• 마우스가 움직이지 않으면 어떻게 해야 합니까?
• Douyin Xiaohuoren을 얻는 방법
• fusioncharts.js를 사용하는 방법
• Python에서 대문자를 소문자로 변환하는 기능 소개
• Ethereum 브라우저 쿼리 디지털 통화
• MySQL datediff 함수 사용
• shib 코인 최신 뉴스

인기 추천

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1414621
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4252755
• 
  JAVA 초보자용 비디오 튜토리얼

  2460147
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  502481
• 
  PHP 제로 기반 입문 튜토리얼

  842511

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1414621 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2460147 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  502481 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215138 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  872539 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  6063 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  4618 학습 시간
• 
  Go 언어 실습 GraphQL

  3990 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  595 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  20289 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

회사 소개 부인 성명 Sitemap

PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！