Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse der Ajax-Kaskadenmenü-Implementierungsmethode

高洛峰
Freigeben： 2016-12-03 16:25:42
Original
991 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des Ajax-Cascading-Menüs. Teilen Sie es allen als Referenz mit. Die Details sind wie folgt:

Der Effekt ist wie folgt:

Beispielanalyse der Ajax-Kaskadenmenü-Implementierungsmethode

Wählen Sie das erste Element und den Inhalt aus Der zweite und dritte Punkt ändern sich entsprechend.
Wählen Sie das zweite Element aus und der Inhalt des dritten Elements ändert sich entsprechend.
Der dritte Punkt hat keinen Einfluss auf den ersten und zweiten Punkt.

Es gibt ein paar erwähnenswerte Punkte:

1. Wird HTML im Vordergrund oder im Hintergrund gespleißt?

Ich habe mich für Frontend-Splicing entschieden, wodurch Datenverkehr und Hintergrundressourcen eingespart werden können. Dies entspricht auch eher der Programmverarbeitung. Im Allgemeinen ist der Hintergrund nur für die Bereitstellung von Daten verantwortlich.

wird über json an die Rezeption weitergeleitet und von dieser zur Verarbeitung abgerufen.

Ajax-Funktion

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;
}
Nach dem Login kopieren

Hintergrund-Ajax-Verarbeitungscode

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;
Nach dem Login kopieren

Rufen Sie die Ajax-Funktion auf und fügen Sie sie in die HTML-Funktion ein

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=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      } 
      $("#bigclassid").html(strHtml);
    }else{
      var strHtml = "<option value=&#39;&#39;>无子选项</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=&#39;&#39;>请选择</option>";
      for(var i=0;i<myobj.length;i++){ 
          strHtml+="<option value=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      } 
      $("#smallclassid").html(strHtml);
    }else{
      var strHtml = "<option value=&#39;&#39;>请选择</option><option value=&#39;&#39;>无子选项</option>";
      $("#smallclassid").html(strHtml);
  }
}
Nach dem Login kopieren

Main Funktion, Ereignisaktion 

$(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);
  });
});
Nach dem Login kopieren

2. Funktionalisierung der Hintergrundabfrage. 

public function getType($where = false, $order = &#39;typeid ASC&#39;, $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][&#39;id&#39;] = $value[&#39;typeid&#39;];
          $type[$key][&#39;name&#39;] = $value[&#39;typename&#39;];
        }
        return $type;
      }else{
        foreach ($aType as $key => $value) {
          $type[$value[&#39;typeid&#39;]] = $value[&#39;typename&#39;];
        }
        return $type;
      }
    }else{
      return false;
    }
}
public function getBigClass($where = false, $order = &#39;BigClassID ASC&#39;, $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[&#39;BigClass.typeid =?&#39;] = array("type"=>1,"val"=>$typeid);
    //print_r($where);exit;
    $from = array(&#39;BigClassID&#39;,"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][&#39;id&#39;] = $value[&#39;BigClassID&#39;];
          $bigClass[$key][&#39;name&#39;] = $value[&#39;BigClassName&#39;];
        }
        return $bigClass;
      }else{
        foreach ($aBigClass as $key => $value) {
          $bigClass[$value[&#39;BigClassID&#39;]] = $value[&#39;BigClassName&#39;];
        }
        return $bigClass;
      }
    }else{
      return false;
    }
}
public function getSmallClass($where = false, $order = &#39;SmallClassID ASC&#39;, $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[&#39;SmallClass.BigClassID =?&#39;] = array("type"=>1,"val"=>$BigClassID);
    //print_r($where);exit;
    $aSmallClass = $this->getSmallClass($where);
    if($aSmallClass){
      if($flag){
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$key][&#39;id&#39;] = $value[&#39;SmallClassID&#39;];
          $smallClass[$key][&#39;name&#39;] = $value[&#39;smallclassname&#39;];
        }
        return $smallClass;
      }else{
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$value[&#39;SmallClassID&#39;]] = $value[&#39;smallclassname&#39;];
        }
        return $smallClass;
      }
    }else{
      return false;
    }
}
Nach dem Login kopieren

Auf diese Weise kann es an mehreren Orten und in mehreren Winkeln verwendet werden.

3. Front-End-JS, dokumentiert, JS mit derselben Funktion werden in einer JS-Datei abgelegt. Der Inhalt wird schließlich funktionalisiert. 

<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:&#39;0&#39;}-->
</select>
>
<select id="bigclassid" name="bigclassid" class=" ffb-input">
    <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:&#39;0&#39;}-->
</select>
>
<select id="smallclassid" name="smallclassid" class=" ffb-input">
    <option value="">请选择</option>
    <!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:&#39;0&#39;}-->
</select>
</td>
</tr>
Nach dem Login kopieren

Dadurch wird das Dokument klarer.

Optimiertes 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;
}
Nach dem Login kopieren


Verwandte Etiketten：
ajax
Quelle：php.cn
Vorheriger Artikel：Analyse der JS-Funktion mit mehreren Parametern zur Standardwertspezifikationsmethode Nächster Artikel：Analyse der Implementierungsmethode der automatischen Auswahlfunktion von jQuery Select
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Zeigen Sie AWS PDF-Dateien im Bootstrap-Modus in Laravel an Ich habe die AWS-URL wie https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65571220...
Aus 2024-04-04 22:16:18
0
1
1450
Überarbeiteter Titel: Berechnen Sie die Gesamtsumme basierend auf der Auswahl des Kontrollkästchens Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle...
Aus 2024-04-04 13:45:50
0
1
3465
Generieren von Inhalten mit Ajax – Scrollen zur ID funktioniert nicht Ich erzeuge Seiteninhalte basierend auf Daten, die ich über Ajax erhalten habe. Das Proble...
Aus 2024-04-04 09:29:39
0
1
397
So übergeben Sie mehrere Listen von Ajax an Django Ich habe ein Problem, ich möchte alle Daten aus der Liste abrufen, also möchte ich alle Da...
Aus 2024-04-03 23:20:06
0
1
362
Laden Sie mehrere Bilddateien in CodeIgniter mit Ajax und PHP hoch Ich habe Probleme beim Hochladen mehrerer Bilddateien auf den Server. Es wäre großartig, w...
Aus 2024-04-03 22:35:03
0
1
318
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage