이 글의 예시에서는 Ajax 캐스케이딩 메뉴 구현 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.
효과는 다음과 같습니다.
첫 번째 항목을 선택하고 내용을 선택하세요. 두 번째 및 세 번째 항목이 이에 따라 변경됩니다.
두 번째 항목을 선택하면 세 번째 항목의 내용이 그에 따라 변경됩니다.
세 번째 항목은 첫 번째와 두 번째 항목에 영향을 주지 않습니다.
몇 가지 언급할 만한 사항이 있습니다:
1. html이 포그라운드에 연결되어 있나요? 아니면 배경에 연결되어 있나요?
트래픽과 백그라운드 리소스를 절약할 수 있는 프론트엔드 스플라이싱을 선택했습니다. 이는 또한 프로그램 처리에 더 가깝습니다. 일반적으로 배경은 데이터 제공만 담당합니다.
은 json을 통해 프론트 데스크로 전달되며, 프론트 데스크는 이를 획득하여 처리합니다.
ajax 함수
function ajaxgetbigclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetbigclass", data:"typeid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; } function ajaxgetsmallclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetsmallclass", data:"bigclassid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; }
백그라운드 ajax 처리 코드
case 'ajaxgetbigclass': $typeid = trim($this->_getParam('typeid')); $daoNews = new dao_news(); if(isset($typeid)){ $bigClass = $daoNews->getBigClassByType($typeid,true); if($bigClass){ $json = json_encode($bigClass); echo $json; }else{ echo FALSE; } }else{ echo FALSE; } break; case 'ajaxgetsmallclass': $bigclassid = trim($this->_getParam('bigclassid')); $daoNews = new dao_news(); if(isset($bigclassid)){ $smallClass = $daoNews->getSmallClassByBigClass($bigclassid,true); if($smallClass){ $json = json_encode($smallClass); echo $json; }else{ echo FALSE; } }else{ echo FALSE; } break;
ajax 함수를 호출하여 html 함수에 접합
function setbigclass(id,flag){ var flag = arguments[1] ? arguments[1] : false;//默认值 var res = ajaxgetbigclass(id); //alert(res); if(res){ myobj = eval(res); for(var i=0;i<myobj.length;i++){ strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>"; } $("#bigclassid").html(strHtml); }else{ var strHtml = "<option value=''>无子选项</option>"; $("#bigclassid").html(strHtml); } if(flag&&res){ return myobj[0].id; } } function setsmallclass(id){ var res = ajaxgetsmallclass(id); //alert(res); if(res){ myobj = eval(res); var strHtml = "<option value=''>请选择</option>"; for(var i=0;i<myobj.length;i++){ strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>"; } $("#smallclassid").html(strHtml); }else{ var strHtml = "<option value=''>请选择</option><option value=''>无子选项</option>"; $("#smallclassid").html(strHtml); } }
메인 함수, 이벤트 액션
$(function(){ //ajax级联 $("#typeid").change(function(){ var id = $(this).val(); var res = setbigclass(id,true); if(res){ setsmallclass(res); }else{ setsmallclass(0); } }); $("#bigclassid").change(function(){ var id = $(this).val(); setsmallclass(id); }); });
2. 백그라운드 쿼리 기능화.
public function getType($where = false, $order = 'typeid ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){ return $this->getData($this->_typename,$where,$order,$pagesize,$offset,$count,$from,$join,$group); } public function getTypeName($flag=false){ $where = array(); $aType = $this->getType($where); if($aType){ if($flag){ foreach ($aType as $key => $value) { $type[$key]['id'] = $value['typeid']; $type[$key]['name'] = $value['typename']; } return $type; }else{ foreach ($aType as $key => $value) { $type[$value['typeid']] = $value['typename']; } return $type; } }else{ return false; } } public function getBigClass($where = false, $order = 'BigClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){ return $this->getData($this->_bigname,$where,$order,$pagesize,$offset,$count,$from,$join,$group); } public function getBigClassByType($typeid = 60,$flag=false){ $where = array(); $where['BigClass.typeid =?'] = array("type"=>1,"val"=>$typeid); //print_r($where);exit; $from = array('BigClassID',"BigClassName","convert(text,BigClassMaster) as BigClassMaster","typeid"); $aBigClass = $this->getBigClass($where, false, false, false, false,$from); if($aBigClass){ if($flag){ foreach ($aBigClass as $key => $value) { $bigClass[$key]['id'] = $value['BigClassID']; $bigClass[$key]['name'] = $value['BigClassName']; } return $bigClass; }else{ foreach ($aBigClass as $key => $value) { $bigClass[$value['BigClassID']] = $value['BigClassName']; } return $bigClass; } }else{ return false; } } public function getSmallClass($where = false, $order = 'SmallClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){ return $this->getData($this->_smallname,$where,$order,$pagesize,$offset,$count,$from,$join,$group); } public function getSmallClassByBigClass($BigClassID = 221,$flag=false){ $where = array(); $where['SmallClass.BigClassID =?'] = array("type"=>1,"val"=>$BigClassID); //print_r($where);exit; $aSmallClass = $this->getSmallClass($where); if($aSmallClass){ if($flag){ foreach ($aSmallClass as $key => $value) { $smallClass[$key]['id'] = $value['SmallClassID']; $smallClass[$key]['name'] = $value['smallclassname']; } return $smallClass; }else{ foreach ($aSmallClass as $key => $value) { $smallClass[$value['SmallClassID']] = $value['smallclassname']; } return $smallClass; } }else{ return false; } }
이렇게 하면 여러 장소에서 여러 각도로 사용할 수 있습니다.
3. 문서화된 프론트엔드 js와 동일한 기능을 가진 js를 하나의 js 파일에 담습니다. 마침내 콘텐츠가 기능화되었습니다.
<script type="text/javascript" src="/js/news/cascade.js"></script> <tr> <td width="20%" height="56" align="right" >请选择分类:</td> <td width="80%" style="padding:10px;"> <select id="typeid" name="typeid" class=" ffb-input"> <!--{html_options options=$aType selected=$aData.typeid|default:'0'}--> </select> > <select id="bigclassid" name="bigclassid" class=" ffb-input"> <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:'0'}--> </select> > <select id="smallclassid" name="smallclassid" class=" ffb-input"> <option value="">请选择</option> <!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:'0'}--> </select> </td> </tr>
이렇게 하면 문서가 명확해집니다.
최적화된 js
$(function(){ //ajax级联 $("#typeid").change(function(){ var id = $(this).val(); setbigclass(id); }); $("#bigclassid").change(function(){ var id = $(this).val(); setsmallclass(id); }); }); function setbigclass(id){ var res = ajaxgetbigclass(id); var strHtml; if(res){ myobj = eval(res); for(var i=0;i"+myobj[i].name+""; } $("#bigclassid").html(strHtml); $("#bigclassid").show().change(); }else{ $("#bigclassid").hide(); $("#smallclassid").hide(); } } function setsmallclass(id){ var res = ajaxgetsmallclass(id); if(res){ myobj = eval(res); var strHtml = ""; for(var i=0;i "+myobj[i].name+""; } $("#smallclassid").html(strHtml); $("#smallclassid").show(); }else{ $("#smallclassid").hide(); } } function ajaxgetbigclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetbigclass", data:"typeid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; } function ajaxgetsmallclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetsmallclass", data:"bigclassid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; }