ajax串聯功能表實現方法執行個體分析_javascript技巧

本文執行個體講述了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.length;i++){          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";      }       $("#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 = "<option value=''>請選擇</option>";      for(var i=0;i<myobj.length;i++){           strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";      }       $("#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;}

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。