첫 번째는 데이터베이스 디자인입니다. 분류 테이블을 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='cate' item='v'>
<option value="{$v['ca_id']}">{$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='"+data[i].ca_id+"'>"+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 중국어 웹사이트에서 관련 기사를 주목해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
