Ajax 캐스케이딩 메뉴 구현 방법 예시 분석
- 高洛峰원래의
- 2016-12-03 16:25:421011검색
이 글의 예시에서는 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;
} 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.