>  기사  >  백엔드 개발  >  ThinkPHP와 Ajax는 보조 연결 드롭다운 메뉴를 실현합니다.

ThinkPHP와 Ajax는 보조 연결 드롭다운 메뉴를 실현합니다.

不言
不言원래의
2018-06-07 13:57:022232검색

이 글에서는 ThinkPHP와 Ajax 간의 보조 연결을 위한 드롭다운 메뉴를 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 데이터베이스는 언제든지 액세스할 수 있으며, 코드를 수정하지 않고도 데이터베이스를 추가, 삭제, 수정 또는 변경할 수 있습니다. 동시에 레벨 2를 달성한 후에는 레벨 3 및 레벨 4도 달성할 수 있습니다. . . 관련 메뉴를 기다려주세요

먼저 데이터베이스 디자인입니다. 분류 테이블을 cate라고 합니다.

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

설정은 다음과 같습니다. 상위 ID: 데이터에 이전 레벨이 없는 경우 상위 ID는 0입니다. 상위 레벨이 있는 경우 상위 ID는 상위 레벨의 ID입니다.

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

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

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 코드:

 $(&#39;#type&#39;).click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr(&#39;id&#39;);
                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 코드는 첫 번째 레이어 유형이 변경된 후 실행됩니다. ajax 메소드의 주요 매개변수는

1.url: ajax를 수신하는 백그라운드 주소입니다. 2.data: 전송 백그라운드로의 데이터는 일반적으로 json을 사용하여 전송됩니다. 여기에 전달되는 것은 선택한 클래스의 id 값입니다.

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

4.error: ajax 실행 실패 방법

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

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

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

Thinkphp의 I() 메소드는 실제로 ajax가 전달한 선택된 컨텐츠의 첫 번째 레이어 ID를 얻기 위해 $_POST[]로 간주할 수 있습니다. 그런 다음 하위 클래스를 얻은 다음 ajaxReturn()을 사용하여 ajax로 돌아갑니다. 여기서 반환 데이터는 json 형식으로 설정되므로 ajax는 json 형식으로 데이터를 받습니다

네이티브 PHP의 반환 데이터 방법:

코드는 다음과 같습니다.

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

레벨 2 연결 드롭다운 메뉴를 구현하려면 URL이 정확해야 하며, 백그라운드에서 수신 시 반환 값이 있어야 한다는 점에 유의해야 합니다. 그렇지 않으면 ajax는 성공 메소드를 실행하지 않습니다.

위 내용은 이 글의 전체 내용입니다. 읽어주신 모든 분들께 감사드립니다. 자세한 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:


PHP로 구현된 실시간 메시지 푸시 기능 [안티 아약스 푸시 기반]

Thinkphp에서 새로 고침 없는 페이징을 달성하기 위해 ajax를 사용하는 방법

위 내용은 ThinkPHP와 Ajax는 보조 연결 드롭다운 메뉴를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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